/*
Theme Name: Odyssey Center
Theme URI: https://www.odysseycenter.com/
Author: Odyssey Center
Description: Custom WordPress theme matching the Odyssey Training Center course-page header and content layout.
Version: 1.3.0
Text Domain: odyssey-center
*/
:root{
  --oc-blue:#52aae8;
  --oc-navy:#00345f;
  --oc-text:#666;
  --oc-max:1090px;
  --oc-header-height:76px;
  --oc-sticky-header-height:65px;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:#fff;color:var(--oc-text);font-family:"Open Sans",Arial,sans-serif;line-height:1.45}
img{max-width:100%;height:auto}

/* Header: the original Odyssey logo intentionally hangs below the white menu row. */
.site-header{position:sticky;top:0;z-index:1000;height:var(--oc-header-height);background:rgba(255,255,255,.97);border-bottom:1px solid #edf0f2}
.header-inner{position:relative;max-width:var(--oc-max);height:var(--oc-header-height);margin:0 auto;display:flex;align-items:stretch}
.branding-wrap{position:relative;z-index:30;flex:0 0 257px;width:257px;height:125px;background:#fff}
.branding,.custom-logo-link{display:block;width:257px;height:125px;margin:0;padding:0;line-height:0;background:#fff}
.branding img,.custom-logo-link img,.custom-logo{display:block!important;width:257px!important;height:125px!important;max-width:257px!important;max-height:125px!important;object-fit:contain;object-position:center top;margin:0!important;padding:0!important}

.main-nav{flex:1;min-width:0;height:var(--oc-header-height);display:flex;align-items:stretch;justify-content:flex-end;margin-left:0}
.main-nav>ul,.main-nav .primary-menu,.main-nav .page-menu>ul{list-style:none;margin:0;padding:0;display:flex;align-items:stretch;justify-content:flex-end;height:100%}
.main-nav li{position:relative;display:flex;align-items:stretch;margin:0;border-left:1px solid #eef1f3}
.main-nav li:last-child{border-right:1px solid #eef1f3}
.main-nav a{display:flex;align-items:center;white-space:nowrap;padding:0 11px;color:#06355d;text-decoration:none;font-size:14px;font-weight:600;line-height:1}
.main-nav .current-menu-item>a,.main-nav .current_page_item>a,.main-nav a:hover,.main-nav a:focus{color:#0785cf}
.main-nav .sub-menu{display:none;position:absolute;left:0;top:100%;z-index:60;min-width:210px;height:auto;margin:0;padding:0;background:#fff;box-shadow:0 5px 15px rgba(0,0,0,.1)}
.main-nav li:hover>.sub-menu,.main-nav li:focus-within>.sub-menu{display:block}
.main-nav .sub-menu li{display:block;border:0;border-bottom:1px solid #eef1f3}
.main-nav .sub-menu a{display:block;padding:13px 16px;line-height:1.3}
.mobile-toggle{display:none;border:0;background:transparent;color:var(--oc-navy);font-size:28px;line-height:1;cursor:pointer}



/* Odyssey-style sticky shrink: once scrolling begins the fixed navigation row
   becomes slightly shorter and the full Training Center logo scales up into
   the white header instead of continuing to hang over the scrolling hero. */
.site-header,.header-inner,.main-nav,.branding-wrap,.branding,.custom-logo-link,
.branding img,.custom-logo-link img,.custom-logo{transition:height .3s ease,width .3s ease,max-width .3s ease,max-height .3s ease,transform .3s ease,flex-basis .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,.08)}
  .site-header.is-scrolled .header-inner,
  .site-header.is-scrolled .main-nav{height:var(--oc-sticky-header-height)}
  .site-header.is-scrolled .branding-wrap{width:134px;height:65px;flex-basis:134px;background:#fff}
  .site-header.is-scrolled .branding,
  .site-header.is-scrolled .custom-logo-link{width:134px;height:65px;background:#fff;overflow:hidden}
  .site-header.is-scrolled .branding img,
  .site-header.is-scrolled .custom-logo-link img,
  .site-header.is-scrolled .custom-logo{width:134px!important;height:65px!important;max-width:134px!important;max-height:65px!important;object-fit:contain;object-position:center top}
}

/* Keep the Odyssey logo and WordPress menu in place while the hero, page title, and body scroll. */
.admin-bar .site-header{top:32px}
@media screen and (max-width:782px){.admin-bar .site-header{top:46px}}

/* Use the real Odyssey ss-courses image; no logo/menu pixels are baked into it. */
.hero{position:relative;z-index:10;height:145px;background-position:center center;background-size:cover;background-repeat:no-repeat}

.content-wrap{max-width:var(--oc-max);margin:0 auto;padding:22px 0 70px}
.entry-title{margin:0 0 38px;color:#333;font-weight:300;font-size:40px;line-height:1.2}
.entry-content{max-width:720px;font-size:16px}
.entry-content p{margin:0 0 22px}
.entry-content h2,.entry-content h3{color:#333;font-weight:400}
.entry-content a{color:#666;text-decoration:underline}
.entry-content .wp-block-button__link,.entry-content .button,.odyssey-button{display:inline-block;background:#1395e8;color:#fff!important;text-decoration:none!important;border-radius:0;padding:13px 28px;font-size:14px}
.site-footer{border-top:1px solid #eee;padding:28px 20px;text-align:center;color:#888;font-size:13px}

@media (max-width:1120px){
  .header-inner,.content-wrap{max-width:calc(100% - 40px)}
  .main-nav a{padding-left:9px;padding-right:9px;font-size:13px}
}
@media (max-width:940px){
  :root{--oc-header-height:86px}
  .site-header{height:var(--oc-header-height)}
  .header-inner{max-width:none;padding:0 20px;align-items:center}
  .branding-wrap,.branding,.custom-logo-link{width:180px;height:88px;flex-basis:180px}
  .branding img,.custom-logo-link img,.custom-logo{width:180px!important;height:88px!important;max-width:180px!important;max-height:88px!important}
  .mobile-toggle{display:block;margin-left:auto;padding:10px}
  .main-nav{display:none;position:absolute;z-index:80;left:0;right:0;top:100%;height:auto;margin:0;background:#fff;border-top:1px solid #eee;box-shadow:0 5px 15px rgba(0,0,0,.08)}
  .main-nav.is-open{display:block}
  .main-nav>ul,.main-nav .primary-menu,.main-nav .page-menu>ul{display:block;height:auto}
  .main-nav li{display:block;border:0;border-bottom:1px solid #eee}
  .main-nav li:last-child{border-right:0}
  .main-nav a{display:block;padding:14px 24px;font-size:14px}
  .main-nav .sub-menu{position:static;display:block;box-shadow:none;padding-left:18px}
  .hero{height:125px}
  .content-wrap{max-width:none;padding:28px 24px 60px}
}
@media (max-width:520px){
  .branding-wrap,.branding,.custom-logo-link{width:150px;height:73px;flex-basis:150px}
  .branding img,.custom-logo-link img,.custom-logo{width:150px!important;height:73px!important;max-width:150px!important;max-height:73px!important}
  .hero{height:95px}
  .entry-title{font-size:34px;margin-bottom:28px}
}
