/*
Theme Name: Online Courses FSE
Theme URI: https://themegrill.com/themes/online-courses-fse/
Author: ThemeGrill
Author URI: https://themegrill.com/
Description: Online Courses FSE is a modern, fully customizable WordPress block theme designed for educational institutions, online course platforms, e-learning websites, and training centers. Built with Full Site Editing capabilities and fully compatible with Masteriyo LMS, this theme offers flexibility and ease of use for creating professional education websites without coding knowledge. Perfect for schools, universities, tutors, and online academies, Online Courses FSE provides seamless integration for courses, lessons, quizzes, student profiles, and enrollment management.
Requires at least: 6.9
Tested up to: 6.9
Requires PHP: 5.7
Version: 1.0.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: online-courses-fse
Tags: education, blog, portfolio, full-site-editing, block-patterns, block-styles, custom-colors, custom-menu, custom-logo, editor-style, featured-images, flexible-header, one-column, two-columns, three-columns, threaded-comments, translation-ready, wide-blocks
*/

html,
body,
.wp-block-post-author__avatar,
.wp-block-social-links,
.wp-block-post-excerpt__excerpt,
.wp-block-separator {
	margin: 0;
	padding: 0;
}

html,
body {
	overflow-x: hidden;
}

.no-margin-top {
	margin-top: 0 !important;
}

/* Box sizing
--------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
html {
	font-smooth: antialiased;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: antialiased;
}

body {
	font-smooth: auto;
	font-smooth: inherit;
	-webkit-font-smoothing: inherit;
}

.wp-site-blocks > .wp-block-group {
	margin-block-start: 0;
}

.wp-block-columns {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-cover {
	margin-block-start: 0;
	margin-block-end: 0;
}

/*--------------------------------------------------------------
# Scroll Progress Bar
--------------------------------------------------------------*/
#ocfse-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: #F0884A;
	z-index: 99999;
	transition: width 0.1s linear;
	border-radius: 0 2px 2px 0;
	box-shadow: 0 0 8px rgba(240, 136, 74, 0.6);
}

/*--------------------------------------------------------------
# Keyframes
--------------------------------------------------------------*/
@keyframes ocfse-fadeUp {
	from {
		opacity: 0;
		transform: translateY(36px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes ocfse-fadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes ocfse-slideLeft {
	from {
		opacity: 0;
		transform: translateX(48px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes ocfse-slideRight {
	from {
		opacity: 0;
		transform: translateX(-48px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes ocfse-float {
	0%, 100% { transform: translateY(0px); }
	50%       { transform: translateY(-14px); }
}

@keyframes ocfse-pulse-dot {
	0%, 100% { box-shadow: 0 0 0 0 rgba(240, 136, 74, 0.5); }
	50%       { box-shadow: 0 0 0 8px rgba(240, 136, 74, 0); }
}

@keyframes ocfse-shimmer {
	0%   { background-position: -200% center; }
	100% { background-position: 200% center; }
}

@keyframes ocfse-scaleIn {
	from {
		opacity: 0;
		transform: scale(0.92);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/*--------------------------------------------------------------
# Reveal on scroll – applied via JS to .wp-block-* elements
--------------------------------------------------------------*/
.ocfse-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.ocfse-reveal.ocfse-visible {
	opacity: 1;
	transform: translateY(0);
}

.ocfse-reveal-left {
	opacity: 0;
	transform: translateX(-40px);
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.ocfse-reveal-left.ocfse-visible {
	opacity: 1;
	transform: translateX(0);
}

.ocfse-reveal-right {
	opacity: 0;
	transform: translateX(40px);
	transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
	            transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.ocfse-reveal-right.ocfse-visible {
	opacity: 1;
	transform: translateX(0);
}

/* Staggered delays for siblings */
.ocfse-reveal:nth-child(1),
.ocfse-reveal-right:nth-child(1),
.ocfse-reveal-left:nth-child(1)  { transition-delay: 0s; }
.ocfse-reveal:nth-child(2),
.ocfse-reveal-right:nth-child(2),
.ocfse-reveal-left:nth-child(2)  { transition-delay: 0.12s; }
.ocfse-reveal:nth-child(3),
.ocfse-reveal-right:nth-child(3),
.ocfse-reveal-left:nth-child(3)  { transition-delay: 0.24s; }
.ocfse-reveal:nth-child(4),
.ocfse-reveal-right:nth-child(4),
.ocfse-reveal-left:nth-child(4)  { transition-delay: 0.36s; }

/*--------------------------------------------------------------
# Global button enhancements
--------------------------------------------------------------*/
.wp-block-button__link,
.wp-element-button {
	transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1),
	            background-color 0.28s ease,
	            color 0.28s ease !important;
	position: relative;
	overflow: hidden;
}

.wp-block-button__link::after,
.wp-element-button::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.15);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 10px 32px rgba(240, 136, 74, 0.4) !important;
}

.wp-block-button__link:hover::after,
.wp-element-button:hover::after {
	opacity: 1;
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(-1px) !important;
}

/*--------------------------------------------------------------
# Image hover effects
--------------------------------------------------------------*/
.wp-block-image img,
.wp-block-cover,
.wp-block-post-featured-image img {
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.5s ease !important;
}

.wp-block-image:hover img {
	transform: scale(1.04);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Rounded images */
.wp-block-image.is-style-rounded img {
	border-radius: 50%;
}

/*--------------------------------------------------------------
# Card / column hover effects
--------------------------------------------------------------*/
.wp-block-column,
.wp-block-group {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.3s ease;
}

/* Only lift columns that are inside a columns block and have a border/background */
.wp-block-columns .wp-block-column[style*="border"],
.wp-block-columns .wp-block-column[class*="has-background"] {
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.32s ease;
}

.wp-block-columns .wp-block-column[style*="border"]:hover,
.wp-block-columns .wp-block-column[class*="has-background"]:hover {
	transform: translateY(-8px);
	box-shadow: 0 20px 48px rgba(240, 136, 74, 0.15);
}

/* Groups with background that act as cards */
.wp-block-group[class*="has-background"][style*="border-radius"]:not(.wp-site-blocks *:first-child) {
	transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.32s ease;
}

.wp-block-group[class*="has-background"][style*="border-radius"]:hover {
	transform: translateY(-6px);
	box-shadow: 0 18px 44px rgba(240, 136, 74, 0.14);
}

/*--------------------------------------------------------------
# Heading underline accent animation
--------------------------------------------------------------*/
.wp-block-heading {
	position: relative;
}

/*--------------------------------------------------------------
# Navigation smooth active + hover states
--------------------------------------------------------------*/
.wp-block-navigation-item__content {
	position: relative;
	transition: color 0.25s ease;
}

.wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	right: 100%;
	height: 2px;
	background: currentColor;
	transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	border-radius: 2px;
}

.wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content::after {
	right: 0;
}

/*--------------------------------------------------------------
# Sticky header blur on scroll (added via JS class)
--------------------------------------------------------------*/
.wp-block-template-part[data-type="header"] > *,
header.wp-block-template-part {
	transition: background 0.35s ease, box-shadow 0.35s ease,
	            backdrop-filter 0.35s ease;
}

.ocfse-header-scrolled header.wp-block-template-part,
.ocfse-header-scrolled .wp-block-template-part {
	box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

/*--------------------------------------------------------------
# Cover / Hero section enhancements
--------------------------------------------------------------*/
.wp-block-cover {
	position: relative;
	overflow: hidden;
}

.wp-block-cover::before {
	transition: opacity 0.5s ease;
}

/* Parallax hint via JS transform */
.wp-block-cover.ocfse-parallax .wp-block-cover__image-background,
.wp-block-cover.ocfse-parallax .wp-block-cover__video-background {
	will-change: transform;
	transition: transform 0.05s linear;
}

/*--------------------------------------------------------------
# Separator animation
--------------------------------------------------------------*/
.wp-block-separator {
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-separator.ocfse-visible {
	transform: scaleX(1);
}

/*--------------------------------------------------------------
# Counter number roll animation
--------------------------------------------------------------*/
.ocfse-counter {
	display: inline-block;
	font-variant-numeric: tabular-nums;
}

/*--------------------------------------------------------------
# Floating badge / social proof animation
--------------------------------------------------------------*/
.ocfse-float {
	animation: ocfse-float 5s ease-in-out infinite;
}

.ocfse-float-slow {
	animation: ocfse-float 8s ease-in-out infinite;
}

/*--------------------------------------------------------------
# Link hover color transition
--------------------------------------------------------------*/
a {
	transition: color 0.22s ease, opacity 0.22s ease;
}

/*--------------------------------------------------------------
# Input / form field focus glow
--------------------------------------------------------------*/
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(240, 136, 74, 0.2);
	border-color: #F0884A !important;
}

/*--------------------------------------------------------------
# Smooth scroll
--------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# Custom scrollbar
--------------------------------------------------------------*/
::-webkit-scrollbar {
	width: 6px;
}

::-webkit-scrollbar-track {
	background: #f1f5f3;
}

::-webkit-scrollbar-thumb {
	background: #F0884A;
	border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
	background: #D6702E;
}

/*--------------------------------------------------------------
# Selection color
--------------------------------------------------------------*/
::selection {
	background: rgba(240, 136, 74, 0.2);
	color: #7A2E0A;
}

/*--------------------------------------------------------------
# Shimmer effect for loading states / highlights
--------------------------------------------------------------*/
.ocfse-shimmer {
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.4) 50%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: ocfse-shimmer 2s infinite;
}

/*--------------------------------------------------------------
# Testimonial / review card hover
--------------------------------------------------------------*/
.wp-block-group[class*="border"] {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            box-shadow 0.3s ease,
	            border-color 0.3s ease;
}

/*--------------------------------------------------------------
# Query / post card hover
--------------------------------------------------------------*/
.wp-block-post {
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.wp-block-post:hover {
	transform: translateY(-4px);
}

/*--------------------------------------------------------------
# Back to top button (injected by JS)
--------------------------------------------------------------*/
#ocfse-back-top {
	position: fixed;
	bottom: 32px;
	right: 32px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #F0884A;
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 6px 24px rgba(240, 136, 74, 0.4);
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
	z-index: 9998;
}

#ocfse-back-top.ocfse-visible {
	opacity: 1;
	transform: translateY(0);
}

#ocfse-back-top:hover {
	background: #D6702E;
	transform: translateY(-3px);
	box-shadow: 0 10px 32px rgba(240, 136, 74, 0.5);
}

#ocfse-back-top svg {
	width: 20px;
	height: 20px;
}

/*--------------------------------------------------------------
# Responsive – keep animations subtle on mobile
--------------------------------------------------------------*/
@media (max-width: 768px) {
	.ocfse-reveal,
	.ocfse-reveal-left,
	.ocfse-reveal-right {
		transform: translateY(16px);
	}

	.wp-block-button__link:hover,
	.wp-element-button:hover {
		transform: translateY(-2px) !important;
	}

	.wp-block-columns .wp-block-column[style*="border"]:hover,
	.wp-block-columns .wp-block-column[class*="has-background"]:hover {
		transform: translateY(-4px);
	}
}

/*--------------------------------------------------------------
# Reduce motion – respect user preferences
--------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.ocfse-reveal,
	.ocfse-reveal-left,
	.ocfse-reveal-right {
		opacity: 1;
		transform: none;
	}
}

/*--------------------------------------------------------------
# Full width fix – override static max-width
--------------------------------------------------------------*/

/* Elimina el max-width fijo en píxeles del contenedor principal */
.wp-site-blocks,
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > .wp-block-cover,
.wp-site-blocks > .wp-block-columns,
.wp-block-post-content,
.entry-content {
	max-width: 100% !important;
	width: 100% !important;
}

/* Quita márgenes automáticos que centran y recortan el layout */
.wp-block-group.alignfull,
.wp-block-cover.alignfull,
.wp-block-columns.alignfull,
.wp-block-group.alignwide,
.wp-block-cover.alignwide,
.wp-block-columns.alignwide {
	max-width: 100% !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Contenedores internos que también pueden tener max-width fijo */
.wp-block-group__inner-container,
.wp-block-cover__inner-container {
	max-width: 100% !important;
	width: 100% !important;
}

/* El padding del site-blocks puede generar el "margen" visual */
.wp-site-blocks {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*--------------------------------------------------------------
# Ninja Forms — Estilos personalizados
--------------------------------------------------------------*/

:root {
  --nf-accent:     #f47c3c;
  --nf-accent-dk:  #d9621e;
  --nf-bg:         #ffffff;
  --nf-border:     #d0ccc6;
  --nf-border-foc: #f47c3c;
  --nf-label:      #222222;
  --nf-placeholder:#9e9b96;
  --nf-radius:     10px;
  --nf-shadow-foc: 0 0 0 3px rgba(244, 124, 60, 0.18);
  --nf-transition: 0.22s ease;
}

/* Contenedor principal */
.nf-form-cont {
	font-family: inherit;
	color: var(--nf-label);
}

/* Aviso de campos requeridos */
.nf-form-fields-required {
	font-size: 0.88rem;
	color: #6b6661;
	margin-block-end: 1.25rem;
}

/* Grupos de campo */
.nf-field-container {
	margin-block-end: 1.4rem;
}

/* Etiquetas */
.nf-field-label label,
.field-wrap label {
	display: block;
	font-size: 0.9rem;
	font-weight: 700;
	color: var(--nf-label);
	margin-block-end: 0.45rem;
	letter-spacing: 0.01em;
}

/* Asterisco de requerido */
.nf-field-label label .ninja-forms-req-symbol,
.field-wrap label .ninja-forms-req-symbol {
	color: #e53e3e;
	margin-inline-start: 2px;
}

/* Inputs y textarea */
.nf-field-element input[type="text"],
.nf-field-element input[type="email"],
.nf-field-element input[type="tel"],
.nf-field-element input[type="number"],
.nf-field-element input[type="url"],
.nf-field-element textarea,
.nf-field-element select {
	width: 100%;
	padding: 0.7rem 1rem;
	background: var(--nf-bg);
	border: 1.5px solid var(--nf-border);
	border-radius: var(--nf-radius);
	font-size: 0.97rem;
	font-family: inherit;
	color: var(--nf-label);
	outline: none;
	transition:
		border-color var(--nf-transition),
		box-shadow   var(--nf-transition);
	appearance: none;
	-webkit-appearance: none;
}

.nf-field-element textarea {
	min-height: 160px;
	resize: vertical;
	line-height: 1.6;
}

/* Placeholder */
.nf-field-element input::placeholder,
.nf-field-element textarea::placeholder {
	color: var(--nf-placeholder);
}

/* Foco */
.nf-field-element input:focus,
.nf-field-element textarea:focus,
.nf-field-element select:focus {
	border-color: var(--nf-border-foc);
	box-shadow: var(--nf-shadow-foc);
}

/* Checkbox */
.nf-field-element input[type="checkbox"] {
	width: 1.1rem;
	height: 1.1rem;
	accent-color: var(--nf-accent);
	cursor: pointer;
	border-radius: 4px;
	margin-inline-end: 0.5rem;
	flex-shrink: 0;
}

.checkbox-container {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.checkbox-wrap .nf-field-label {
	order: 2;
}

/* Errores de validación */
.nf-error .nf-field-element input,
.nf-error .nf-field-element textarea,
.nf-error .nf-field-element select {
	border-color: #e53e3e;
	box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.15);
}

.nf-error-msg,
.ninja-forms-error-message {
	font-size: 0.82rem;
	color: #e53e3e;
	margin-block-start: 0.3rem;
	display: block;
}

/* Botón de envío */
.nf-field-element input[type="button"],
.nf-field-element input[type="submit"],
#nf-submit-btn,
.submit-container input,
.nf-form-cont .nf-field-element button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 2.25rem;
	background: var(--nf-accent);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 700;
	font-family: inherit;
	border: none;
	border-radius: 50px;
	cursor: pointer;
	letter-spacing: 0.03em;
	transition:
		background  var(--nf-transition),
		transform   var(--nf-transition),
		box-shadow  var(--nf-transition);
	box-shadow: 0 4px 16px rgba(244, 124, 60, 0.28);
}

.nf-field-element input[type="button"]:hover,
.nf-field-element input[type="submit"]:hover,
#nf-submit-btn:hover,
.submit-container input:hover {
	background: var(--nf-accent-dk);
	transform: translateY(-2px);
	box-shadow: 0 7px 20px rgba(244, 124, 60, 0.38);
}

.nf-field-element input[type="button"]:active,
.nf-field-element input[type="submit"]:active {
	transform: translateY(0);
	box-shadow: 0 3px 10px rgba(244, 124, 60, 0.2);
}

/* Mensaje de éxito */
.nf-response-msg {
	background: #ecfdf5;
	border-left: 4px solid #10b981;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	color: #065f46;
	font-weight: 600;
	margin-block-start: 1rem;
}