/*
Theme Name: GeneratePress Child
Template: generatepress
Version: 1.0
Description: Learning Stewards customizations (sidebar styling, header embed, banner/menu).
*/

/* ===== Header banner: max 1280, centered (matches content) ===== */
.ls-header-banner {
    max-width: 1280px;
    margin: 0 auto;
    line-height: 0;
}
.ls-header-banner img {
    width: 100%;
    height: auto;
    display: block;
}

/* hide GP site title/branding and the leftover mobile toggle (they steal flex space) */
.navigation-branding,
.site-branding {
    display: none !important;
}
.main-navigation.mobile-menu-control-wrapper {
    display: none !important;
}
.main-navigation .menu-toggle {
    display: none !important;
}

/* ===== Menu bar: 1280 wide, items left-aligned ===== */
.main-navigation {
    background: #475db3;
}
/* HIGH SPECIFICITY: beat GeneratePress's own nav layout rules.
   GP applies justify-content:space-between on .inside-navigation and right-aligns
   via the sub-menu-right class; we override the layout props with matching/higher
   specificity + !important so OUR alignment wins (colors already won, per red test). */
body .main-navigation .inside-navigation {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;            /* FORCE actual width — max-width alone left it at 620px */
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
/* the nav itself and the header grid must allow full width too */
body .main-navigation {
    width: 100% !important;
    max-width: 1280px !important;   /* match banner width, not full screen */
    margin: 0 auto !important;       /* center like the banner */
    border-top: 2px solid #5a6dc0 !important;  /* dividing line, banner-to-menu */
}
body .inside-header {
    width: 100% !important;
    max-width: 100% !important;
}
body .main-navigation.sub-menu-right .inside-navigation {
    justify-content: flex-start !important;
}
body .main-navigation #primary-menu,
body .main-navigation .main-nav {
    width: 100% !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
}
body .main-navigation .main-nav > ul {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
}

/* THE FIX: sub-menu-right pushes the menu via margin-left:auto, which overrides
   justify-content in flexbox. Kill every auto-margin on the nav children so the
   menu sits at the left. */
body .main-navigation .inside-navigation > *,
body .main-navigation #primary-menu,
body .main-navigation .main-nav,
body .main-navigation .main-nav > ul,
body .main-navigation .main-nav > ul > li {
    margin-left: 0 !important;
    margin-right: 0 !important;
}
body .main-navigation.sub-menu-right .main-nav ul {
    margin-left: 0 !important;
}
.main-navigation .main-nav ul li a {
    color: #fff !important;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    border-right: 1px solid #5a6dc0;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li:hover > a {
    background: #2f4196;
    color: #fff !important;
}
.main-navigation .main-nav ul ul {
    background: #475db3;
}


/* ===== Content / sidebar split: match ORIGINAL Canvas fixed widths =====
   Original live site: content column ~960px (content images are 950px),
   sidebar column ~310px (sidebar images are 310px), total ~1280.
   Use percentages so it stays responsive and collapses to mobile, but
   tuned to the 960/310 ratio (75/24.2) of the original. */
@media (min-width: 769px) {
    /* 75/25 split ONLY when a sidebar is present (GP adds .right-sidebar to body) */
    body.right-sidebar .site-content .content-area,
    body.both-right .site-content .content-area,
    body.both-left .site-content .content-area,
    body.left-sidebar .site-content .content-area {
        width: 75% !important;     /* ~960px at 1280 container */
    }
    .site-content .sidebar,
    .site-content .widget-area {
        width: 25% !important;     /* ~310px at 1280 container */
    }
    /* when NO sidebar, content fills the full 1280 container */
    body.no-sidebar .site-content .content-area,
    body.full-width-content .site-content .content-area {
        width: 100% !important;
    }
}

/* ===== Sidebar: one continuous Canvas-style panel ===== */
.inside-right-sidebar,
.inside-left-sidebar {
    font: normal 12px/1.5em Arial, sans-serif;
    color: #555555;
    padding: 8px;
    background-color: #eaf5fb;
    border: 1px solid #495db2;
    border-radius: 0;
}
.inside-right-sidebar .widget,
.inside-left-sidebar .widget {
    margin: 0 0 30px 0;
    padding: 0;
    background: none;
    border: 0;
    font-size: 12px;
    color: inherit;
}
.inside-right-sidebar .widget:last-child,
.inside-left-sidebar .widget:last-child {
    margin-bottom: 0;
}
.inside-right-sidebar .widget .widget-title,
.inside-left-sidebar .widget .widget-title {
    margin: 0 0 0.8em 0;
    padding: 0 0 0.8em;
    font: normal bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #555;
    border-bottom: 1px solid #e6e6e6;
}
.inside-right-sidebar .textwidget,
.inside-left-sidebar .textwidget {
    line-height: 1.4;
}
.inside-right-sidebar .textwidget p,
.inside-left-sidebar .textwidget p {
    margin: 0 0 10px;
}
.inside-right-sidebar .textwidget hr,
.inside-left-sidebar .textwidget hr {
    margin: 8px 0;
}

/* ===== helper class for hand-editing widgets ===== */
.sidebar-label {
    display: block;
    font-size: 10px;
    font-weight: bold;
    text-align: center;
    margin: 4px 0;
}

/* ===== FINAL: left-align items + tighten height ===== */
/* the bar is full-width now; push the menu ul to the left and align under banner */
body .main-navigation .inside-navigation {
    align-items: stretch !important;
}
body .main-navigation .main-nav,
body .main-navigation #primary-menu {
    margin: 0 !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}
body .main-navigation .main-nav > ul {
    display: flex !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* tighten menu height: small line-height + padding on the links */
body .main-navigation .main-nav ul li a {
    line-height: normal !important;
    padding: 8px 14px !important;
}
/* align the whole header block: banner and menu share the same left edge.
   Banner is centered at max 1280; make the menu match by capping its inner content. */
body .main-navigation .inside-navigation {
    max-width: 1280px !important;
    margin: 0 auto !important;
}

/* ensure banner and menu are flush (no gap) */
.ls-header-banner { margin-bottom: 0 !important; }
body .main-navigation { margin-top: 0 !important; }
.site-header, .inside-header { margin: 0 !important; padding: 0 !important; }

/* ===== Canvas [box type="info"] recreation (pink info notice) ===== */
.woo-sc-box {
    margin: 1em 0 1.5em 0;
    padding: 15px 20px;
    color: #555;
    text-shadow: none;
    background-image: none;
}
/* info = the site's customized pink notice */
.woo-sc-box.info {
    background-color: #fdecf2;     /* light pink */
    border: 1px solid #f5c6d6;     /* soft pink border */
    color: #555;
    white-space: nowrap;           /* force single line */
    overflow: hidden;              /* clip rather than wrap if extreme */
    font-size: 14px;               /* base; shrinks below on narrow screens */
}
/* the box content often sits in a <p>; keep it inline & single-line too */
.woo-sc-box.info p {
    margin: 0;
    white-space: nowrap;
}
/* shrink the font as the viewport narrows so the line still fits */
@media (max-width: 1100px) { .woo-sc-box.info, .woo-sc-box.info p { font-size: 13px; } }
@media (max-width: 980px)  { .woo-sc-box.info, .woo-sc-box.info p { font-size: 12px; } }
@media (max-width: 860px)  { .woo-sc-box.info, .woo-sc-box.info p { font-size: 11px; } }
@media (max-width: 760px)  { .woo-sc-box.info, .woo-sc-box.info p { font-size: 10px; } }
/* the round info icon, drawn with CSS (no FontAwesome needed) */
.woo-sc-box.info:before {
    content: "i";
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: bold;
    font-size: 13px;
    color: #fff;
    background: #9aa0a6;            /* grey ⓘ disc like the screenshot */
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: baseline;
    position: relative;
    top: 1px;
}
/* keep links inside the box styled normally */
.woo-sc-box.info a {
    color: #2a6fb0;
}
/* other Canvas box types, in case any pages use them */
.woo-sc-box.alert { background-color:#ffd9c8; border:1px solid #f0baa2; }
.woo-sc-box.note  { background-color:#fef6d2; border:1px solid #efe3ae; }
.woo-sc-box.tick,
.woo-sc-box.download { background-color:#edfcd5; border:1px solid #d4ebaf; }
.woo-sc-box.normal { background-color:#eee; border:1px solid #ccc; }
.woo-sc-box.rounded { border-radius:5px; }

/* ===== Blog archive: featured image left, content beside it (match live) ===== */
.blog .post-image,
.archive .post-image,
.blog article .post-image,
.archive article .post-image {
    float: left;
    width: 270px;
    margin: 0 20px 10px 0;
}
.blog .post-image img,
.archive .post-image img {
    width: 270px;
    height: auto;
    display: block;
}
/* clear floats after each post so they don't overlap */
.blog article.post,
.archive article.post {
    overflow: hidden;
}

/* ===== Hide GeneratePress automatic page/post hero (featured) image ===== */
/* Canvas used featured images only for social sharing, never on-page.
   This hides the auto hero only; images placed in the body are untouched.
   Pages use .page-header-image; single POSTS use .page-header-image-single. */
.featured-image.page-header-image,
.page-header-image,
.featured-image.page-header-image-single,
.page-header-image-single {
    display: none !important;
}

/* ===== Page/post title: 14pt bold, tight 5px top/bottom spacing ===== */
.entry-header .entry-title,
.page .entry-title,
.single .entry-title,
h1.entry-title {
    font-size: 14pt;
    font-weight: bold;
    margin-top: 12px;      /* symmetric: equal space above & below the title */
    margin-bottom: 12px;
    padding-top: 0;
    padding-bottom: 0;
}
/* content that follows starts right after the title's bottom margin */
.entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/* also trim any padding GeneratePress puts on the header wrapper above the title */
.entry-header {
    padding-top: 0;
    margin-top: 0;
}

/* ===== Tighten space above the page title (remove container top padding) ===== */
.site-content .content-area,
.inside-article,
article.page,
article.post,
.entry-header {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* GeneratePress separate-containers add padding to .inside-article; trim its top */
.separate-containers .inside-article {
    padding-top: 10px !important;   /* small breathing room, not the big default */
}
/* content area top padding (the main column) */
.separate-containers .site-main {
    margin-top: 0 !important;
}

/* ===== Solid white background; remove peach tint and the menu-row seam ===== */
body,
.site,
.site-content,
#page,
.separate-containers .site-main,
.separate-containers .inside-article,
.content-area,
.widget-area {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* ===== Align content left edge with banner/menu (remove GP indent) ===== */
.separate-containers .inside-article,
.inside-article {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* the entry content/header inherit flush-left too */
.entry-content,
.entry-header,
.page-header-image-single + .entry-header {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* ===== Tighten pingback/comment list spacing to single line ===== */
.comment-list li,
.comment-list .comment,
.comment-list .pingback,
ol.comment-list > li {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    line-height: 1.3 !important;
}
.comment-list .comment-body,
.comment-list .pingback p,
.comment-list .pingback {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1.3 !important;
}
/* remove the large top border/gap GeneratePress puts between comment items */
.comment-list > li + li,
.comment-list .comment + .comment,
.comment-list .pingback {
    border-top: none !important;
    margin-top: 0 !important;
}

/* ===== Sidebar videos: center the player AND its first caption consistently =====
   The .ls-video wrapper is consistent across all videos, but the original content
   wrapped some in stray <center> tags and not others, so some sat left-aligned.
   These rules center EVERY .ls-video and make the first text block immediately
   following it (the caption, a <strong> or wrapped <center>) centered 10pt bold.
   The adjacent-sibling (+) selector hits ONLY the first block after the video. */

/* center the video player itself, in the sidebar (270px wrapper, auto margins) */
.inside-right-sidebar .ls-video,
.inside-left-sidebar .ls-video {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* the FIRST element immediately after a video = its caption: center + 10pt bold.
   Covers a bare <strong> caption, or a <center>/<p> wrapping the caption. */
.inside-right-sidebar .ls-video + strong,
.inside-left-sidebar .ls-video + strong,
.inside-right-sidebar .ls-video + center,
.inside-left-sidebar .ls-video + center,
.inside-right-sidebar .ls-video + p,
.inside-left-sidebar .ls-video + p {
    display: block;
    text-align: center !important;
    font-size: 10pt !important;
    font-weight: bold !important;
    margin: 4px 0 12px !important;
}
/* if the caption is wrapped, make sure the inner strong is bold 10pt too */
.inside-right-sidebar .ls-video + center strong,
.inside-left-sidebar .ls-video + center strong,
.inside-right-sidebar .ls-video + p strong,
.inside-left-sidebar .ls-video + p strong {
    font-size: 10pt !important;
    font-weight: bold !important;
}

/* ===== Footer bar: copyright left, links right (match live) ===== */
.ls-footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
}
.ls-footer-left {
    text-align: left;
}
.ls-footer-right {
    text-align: right;
}
/* make sure GeneratePress's footer container lets our bar span full width */
.site-info .inside-site-info,
.site-info .copyright-bar {
    width: 100%;
    max-width: 100%;
}

/* ============================================================================
   PCUES/OLSN embed ships UNSCOPED Bootstrap. Bootstrap's global `.container`
   rule (max-width 540/720/960/1140) hijacks GeneratePress's content wrapper
   <div class="site grid-container container">, capping it narrower than the
   1280 banner/menu. Canvas never used a `.container` class, so this only
   surfaces on this (GeneratePress) site, and only live (where PCUES loads).
   3-class + !important beats Bootstrap's single-class rule at every breakpoint;
   does NOT touch the widget's own `.container` elements. Remove once the PCUES
   bundle is rescoped. Added 2026-07-07. */
.site.grid-container.container {
    max-width: 1280px !important;
    width: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}