/*
Theme Name: TMS OC GeneratePress Child
Theme URI: https://teammindshift.com
Description: GeneratePress child theme recreating odyssey-center-theme's look (sticky shrinking header, 257x125 logo, bordered dropdown nav, separate mountain-photo hero band, plain footer) on top of GeneratePress's own header/navigation/sidebar system -- not a from-scratch rebuild, so LearnDash's sidebar widgets keep behaving exactly like they do on any other GeneratePress-based site.
Author: Team MindShift
Author URI: https://teammindshift.com
Template: generatepress
Version: 2.0.3
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: tms-oc-generatepress-child
*/

/* ============================================================
   Palette/measurements pulled directly from odyssey-center-theme
   v1.3.0's own style.css -- these are its real values, not
   approximations.
   ============================================================ */

:root {
	--oc-blue: #52aae8;
	--oc-navy: #00345f;
	--oc-text: #666666;
	--oc-header-height: 76px;
	--oc-sticky-header-height: 65px;
}

body {
	font-family: "Open Sans", Arial, sans-serif;
	color: var(--oc-text);
	line-height: 1.45;
}

/* ---- Sticky header: GeneratePress's own <header id="masthead"
   class="site-header"> becomes the sticky white bar. .is-scrolled is
   toggled by assets/js/sticky-header.js (ported from
   odyssey-center-theme's assets/menu.js) on scroll > 8px. ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	height: var(--oc-header-height);
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid #edf0f2;
	transition: height 0.3s ease;
}
.admin-bar .site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 46px;
	}
}
.site-header .inside-header {
	position: relative;
	max-width: 1090px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	transition: height 0.3s ease;
}

/* ---- Logo: GeneratePress's own .site-logo (Customizer > Site
   Identity), sized to the reference site's 257x125 box and shrinking
   to 134x65 once .is-scrolled is active. ---- */
.site-logo {
	flex: 0 0 257px;
	width: 257px;
	height: 125px;
	background: #fff;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	overflow: hidden;
	transition: width 0.3s ease, height 0.3s ease, flex-basis 0.3s ease;
}
.site-logo img {
	display: block;
	width: 257px;
	height: 125px;
	max-width: 257px;
	max-height: 125px;
	object-fit: contain;
	object-position: center top;
	margin: 0;
	transition: width 0.3s ease, height 0.3s ease, max-width 0.3s ease, max-height 0.3s ease;
}
@media (min-width: 941px) {
	.site-header.is-scrolled {
		height: var(--oc-sticky-header-height);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	}
	.site-header.is-scrolled .inside-header {
		height: var(--oc-sticky-header-height);
	}
	.site-header.is-scrolled .site-logo {
		width: 134px;
		height: 65px;
		flex-basis: 134px;
	}
	.site-header.is-scrolled .site-logo img {
		width: 134px;
		height: 65px;
		max-width: 134px;
		max-height: 65px;
	}
}

/* ---- Nav: GeneratePress's own .main-navigation, styled as bordered
   cells with a white dropdown for .sub-menu (standard WP menu-walker
   class -- GeneratePress doesn't rename it, so this needs no mapping).

   GeneratePress's real mobile breakpoint is 768px, confirmed by reading
   its own dynamic Customizer CSS directly off a live page (not
   assumed, and NOT the reference site's own hand-rolled 940px, which
   this file used to copy verbatim). Below 768px GeneratePress prints
   its own inline rule: `.main-navigation ul{display:none}`, shown only
   once its JS adds `.toggled` on a menu-toggle click. That rule and
   this file's desktop flex-row rule below have equal selector
   specificity (.main-navigation ul, one class + one type each) -- an
   earlier version of this file declared the flex-row rule unscoped
   (always on), which tied with GeneratePress's hide rule and won by
   source order, leaving the mobile menu permanently open on top of the
   hero image. Scoping it to min-width:769px removes the tie entirely,
   the correct fix rather than fighting GeneratePress's own mechanism
   with !important or a mismatched breakpoint. ---- */
/* GeneratePress's own Customizer color scheme on this site is
   configured for a dark navigation bar (#222 background, white text,
   a solid #3f3f3f box behind the current-page link) -- printed as
   inline CSS in <head>, with selectors specific enough
   (.main-navigation .main-nav ul li a, .main-navigation .main-nav ul
   li[class*="current-menu-"] > a) to beat this file's plain
   .main-navigation/.main-navigation a rules most of the time. That's
   what was showing through as a gray bar with washed-out text and a
   solid box around the current page, not just a mobile-only issue.
   !important below is a deliberate, narrow override of that specific
   inline CSS, applied unconditionally (not just inside a breakpoint)
   since the conflict exists at every width. */
.main-navigation,
.main-navigation ul ul {
	background: transparent !important;
}
.main-navigation {
	flex: 1;
	min-width: 0;
}
.main-navigation .inside-navigation {
	height: 100%;
}
.main-navigation a {
	color: #06355d !important;
}
.main-navigation .current-menu-item > a,
.main-navigation .current_page_item > a,
.main-navigation a:hover,
.main-navigation a:focus {
	color: #0785cf !important;
	background: transparent !important;
}
.main-navigation .sub-menu {
	margin: 0;
	padding: 0;
	background: #fff;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.main-navigation .sub-menu a {
	display: block;
	padding: 13px 16px;
	line-height: 1.3;
}
@media (min-width: 769px) {
	.main-navigation ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		align-items: stretch;
		justify-content: flex-end;
		height: 100%;
	}
	.main-navigation li {
		position: relative;
		display: flex;
		align-items: stretch;
		margin: 0;
		border-left: 1px solid #eef1f3;
	}
	.main-navigation li:last-child {
		border-right: 1px solid #eef1f3;
	}
	.main-navigation a {
		display: flex;
		align-items: center;
		white-space: nowrap;
		padding: 0 11px;
		text-decoration: none;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
	}
	.main-navigation .sub-menu {
		display: none;
		position: absolute;
		left: 0;
		top: 100%;
		z-index: 60;
		min-width: 210px;
	}
	.main-navigation li:hover > .sub-menu,
	.main-navigation li:focus-within > .sub-menu {
		display: block;
	}
	.main-navigation .sub-menu li {
		display: block;
		border: 0;
		border-bottom: 1px solid #eef1f3;
	}
}
@media (min-width: 769px) and (max-width: 1120px) {
	.main-navigation a {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 13px;
	}
}
@media (max-width: 768px) {
	/* GeneratePress's own .toggled class controls display:none/block on
	   .main-navigation ul -- nothing here touches that. Only the visual
	   styling of whatever GeneratePress has already decided to show. */
	.main-navigation li {
		display: block;
		border: 0;
		border-bottom: 1px solid #eee;
	}
	.main-navigation a {
		display: block;
		padding: 14px 24px;
		font-size: 14px;
	}
	.main-navigation .sub-menu {
		position: static;
		display: block;
		box-shadow: none;
		padding-left: 18px;
	}
}

/* ---- Mobile toggle: GeneratePress's own built-in .menu-toggle,
   restyled to look like the reference site's hamburger rather than
   replaced with new markup/JS -- keeps GeneratePress's own accessible
   toggle wiring intact. ---- */
.menu-toggle {
	border: 0;
	background: transparent;
	color: var(--oc-navy);
	font-size: 28px;
	line-height: 1;
}

/* ---- Hero: a plain mountain-photo band directly below the header
   (generate_after_header -- see functions.php), separate from the
   logo/nav, matching the reference site exactly (no photo-behind-header
   treatment). ---- */
.tms-oc-hero {
	position: relative;
	z-index: 10;
	height: 145px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
@media (max-width: 940px) {
	.tms-oc-hero {
		height: 125px;
	}
}
@media (max-width: 520px) {
	.tms-oc-hero {
		height: 95px;
	}
}

/* ---- Page title: GeneratePress's own in-content .entry-title,
   restyled -- the reference site's title lives in the content area
   below the hero band, not inside the header, so nothing needs
   suppressing here (unlike the previous draft of this theme). ---- */
.entry-title {
	margin: 0 0 38px;
	color: #333333;
	font-weight: 300;
	font-size: 40px;
	line-height: 1.2;
}
@media (max-width: 520px) {
	.entry-title {
		font-size: 34px;
		margin-bottom: 28px;
	}
}

/* ---- Content ---- */
.entry-content {
	max-width: 720px;
	font-size: 16px;
}
.entry-content p {
	margin: 0 0 22px;
}
.entry-content h2,
.entry-content h3 {
	color: #333333;
	font-weight: 400;
}
.entry-content a {
	color: var(--oc-text);
	text-decoration: underline;
}
.entry-content .wp-block-button__link,
.entry-content .button,
.entry-content a.button,
.entry-content input[type="submit"] {
	display: inline-block;
	background: #1395e8;
	color: #fff;
	text-decoration: none;
	border-radius: 0;
	padding: 13px 28px;
	font-size: 14px;
}

/* ---- Sidebar: GeneratePress's own single optional sidebar
   (Customizer > Layout > Sidebar Layout) -- this is the whole point of
   building on GeneratePress rather than reimplementing a custom
   left+right system: LearnDash widgets dropped in here behave exactly
   like they do on any other GeneratePress site. Only lightly restyled
   to match the palette. ---- */
.sidebar .widget-title {
	color: var(--oc-navy);
	font-size: 16px;
	padding-bottom: 8px;
	border-bottom: 2px solid #eef1f3;
}

/* ---- Footer: GeneratePress's own plain copyright output
   (generate_credits), restyled to match the reference site's
   single-line footer -- no widget columns. ---- */
.site-info {
	border-top: 1px solid #eee;
	padding: 28px 20px;
	text-align: center;
	color: #888888;
	font-size: 13px;
	background: transparent;
}
.site-info .inside-site-info {
	max-width: none;
	padding: 0;
}

@media (max-width: 1120px) {
	.site-header .inside-header {
		max-width: calc(100% - 40px);
	}
}
@media (max-width: 940px) {
	:root {
		--oc-header-height: 86px;
	}
	.site-header .inside-header {
		max-width: none;
		padding: 0 20px;
		align-items: center;
	}
	.site-logo {
		width: 180px;
		height: 88px;
		flex-basis: 180px;
	}
	.site-logo img {
		width: 180px;
		height: 88px;
		max-width: 180px;
		max-height: 88px;
	}
}
@media (max-width: 520px) {
	.site-logo {
		width: 150px;
		height: 73px;
		flex-basis: 150px;
	}
	.site-logo img {
		width: 150px;
		height: 73px;
		max-width: 150px;
		max-height: 73px;
	}
}