/**
 * Theme Name: Learning Networks of Ontario
 * Description: LNO Theme
 * Author: SlypigPro
 * Template: blocksy
 
 */
:root {
  --lnogreen: rgb(96, 107, 62);
  --lnogreenop: rgba(96, 107, 62, 0.5);
  --lnodarkgreen: #2d3820;
  --lnonotasdarkgreen: #354126;
  --lnolight: #fef9e1;
  --lnolightorange: #db9e64;
  --lnoorange: #ba6a32;
}

@font-face {
  font-family: 'Calibri';
  src: url('fonts/calibri.woff2') format('woff2'),
    url('fonts/calibri.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

* {
  box-sizing: border-box;
  font-family: "Calibri", sans-serif !important;

}


.lno-hr {
    border: none;
    border-top: 1px solid var(--lnodarkgreen);
    margin: 60px auto;
    width: 100%; /* shorter line */
}


ul:not(nav ul),
ol:not(nav ol) {
  margin-bottom: 1.5em !important;
}



/* Horizontal spacing between widgets on desktop, skip homepage */
body:not(.home):not(.front-page) .panel-grid .panel-grid-cell:not(:first-child) {
    margin-left: 30px !important; /* force space between widgets */
}

/* Vertical spacing under widgets on mobile, skip homepage */
@media (max-width: 768px) {
    body:not(.home):not(.front-page) .panel-grid-cell {
        margin-bottom: 25px !important; /* space under widgets/rows */
    }

    /* Remove horizontal spacing on mobile so stacked widgets are flush */
    body:not(.home):not(.front-page) .panel-grid .panel-grid-cell {
        margin-left: 0 !important;
    }

    body:not(.home):not(.front-page) .panel-grid .panel-grid-cell:not(:first-child) {
    margin-left: 0 !important; /* force space between widgets */
}
}



button  {
  padding: 1.2em !important;
  margin:1.5em 0 !important;
  background-color: var(--lnogreen) !important;
  color: var(--lnolight) !important;
  text-decoration: none !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  transition: background-color 0.2s !important;
}

button:hover {
  background-color: var(--lnodarkgreen) !important;
  color: #FFF !important;
  cursor: pointer;
}


#main {
  font-size: clamp(1rem, calc(0.25vw + 0.95rem), 1.25rem);
  /* 16px -> 20px (320px -> 1920px) */
}

header .menu {
  color: var(--lnolight) !important;
}


@keyframes dropdownBounce {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }

  60% {
    opacity: 1;
    transform: translateY(5px);
  }

  100% {
    transform: translateY(0);
  }
}

.bouncy-submenu {
  animation: dropdownBounce 0.2s ease-out !important;
  transform-origin: top center;
}



.home .hero-section {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.home .ct-container-full {
  margin: 0 !important;
  padding: 0 !important;
}

/* SUBMENU MOBILE NAV FIX ****************************************************************/

.ct-toggle-dropdown-mobile {
  padding: 0 !important;
  margin: 25px 0 !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
}


/* FIX FOR DROPDOWN ARROW SPACE ************************************************************/

.header-menu-1 .ct-toggle-dropdown-desktop-ghost {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* HERO IMAGE *****************************************************************************/

.siteorigin-panels-stretch {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
}

#lno-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;


  position: relative;
  background-image: url("https://staging.learningnetworks.ca/wp-content/themes/learning-networks/images/hero-bg4.webp");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right center;
  min-height: 50vh;
  overflow: hidden;
}

#lno-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  /* Transparent by default */
  pointer-events: none;
  z-index: 1;
}

/* Text stays above the overlay */
.hero-text {
  font-size: clamp(1.6rem, 1.1667rem + 1.1111vw, 2.5rem);
  color: var(--lnolight);
  padding: 0 2em;
  line-height: 1.5em;
  position: relative;
  z-index: 2;
  width: 60%;
}

/* Dark overlay activates below 1270px */
@media screen and (max-width: 1270px) {
  #lno-hero::before {
    background-color: rgba(0, 0, 0, 0.5);
    /* 50% black overlay */
  }
}

@media screen and (max-width: 768px) {
  #lno-hero {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .hero-text {
    width: 100%;
    text-align: left;
  }


}

/* Apply margin-left only to non-first cells, except on the homepage */
/*body:not(.home) .panel-grid-cell:not(:first-child) {
  margin-left: 2.5em !important;
}*/

/* Remove margin on small screens (mobile) */
@media (max-width: 768px) {
  body:not(.home) .panel-grid-cell {
    margin-left: 0 !important;
  }
}





#lno-midmenu * {
  color: var(--lnolight);
}

#lno-midmenu,
#lno-quote {
  background-color: var(--lnoorange);

}

#lno-midmenu .box {
  min-height: 8em !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  margin: 0;
width: 100%;

}

#lno-midmenu .box:hover {
  background-color: var(--lnolightorange);


}



.box h2 {
  margin: 0 !important;
  text-align: center;
}


.box {
  font-size: 20px;
  text-align: center !important;
  width: 100%;
}

.mid-box {
  border-left: 2px solid var(--lnolight);
  border-right: 2px solid var(--lnolight);
}

@media (max-width:768px) {
  .mid-box {
    border-top: 2px solid var(--lnolight);
    border-bottom: 2px solid var(--lnolight);
    border-left: none;
    border-right: none;
  }
}

/* LNO News*/

#lno-news {
  padding: 4em 0;
}

@media (max-width: 768px) {
  .portfolio-image img {
    max-width: 100% !important;
  }
}

@media (max-width: 768px) {

  .portfolio-image {
    width: 100%;
  }

  .portfolio-image img {
    width: 100%;
    height: auto;
    display: block;
  }

}

/* LNO Quote */

#lno-quote .box {
  color: #FFFFFF;
  font-size: clamp(1.4rem, 1rem + 0.9vw, 2rem);
  padding:  1em 4.5em !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  width: 100%;
  text-align: left !important;
}

#lno-quote .box span {
  color: var(--lnolight);
  /*font-style: italic;*/
}

@media (max-width:480px) {
  #lno-quote .box {
    padding: 1em !important;
  }
}

#lno-quote .box span {
  color: var(--lnolight);
  /*font-style: italic;*/
}


/* Container for all cards */
.portfolio-container,
.portfolio-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  /* spacing between cards */
  width: 100%;
  /* stretch across page */
}

.portfolio-container {
  max-height: calc(32em * 3 + 3em);
  /* only 3 cards visible */
  overflow-y: auto;
  /* scroll if more than 3 */
}

.portfolio-item-home {
  display: flex;
  gap: 1em;
  width: 100%;
  border: 3px solid var(--lnolightorange);
  /* warm accent */
  border-radius: 6px;
  overflow: hidden;
  padding: 1em;
  background-color: var(--lnolight);
  /* soft cream background */
  box-sizing: border-box;
  align-items: flex-start;
}

.portfolio-image {
  flex: 0 0 200px;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--lnogreenop);
  /* placeholder bg */
  display: flex;
  align-items: center;
  justify-content: center;
}

.portfolio-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}

.portfolio-placeholder {
  color: var(--lnodarkgreen);
  /* softer readable text */
  font-weight: 700;
  font-size: 1.25rem;
  text-align: center;
}

.portfolio-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: var(--lnodarkgreen);
  /* body text color */
}

.portfolio-content h1 {
  font-size: clamp(1.38rem, calc(0.38vw + 1.3rem), 1.75rem);
}

.portfolio-content h2 {
  font-size: clamp(1.13rem, calc(0.25vw + 1.07rem), 1.38rem);
  /* 18px -> 22px (320px -> 1920px) */
}

.read-more {
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
}

.read-more a {
  padding: 0.5em 1em;
  background-color: var(--lnogreen);
  /* button bg */
  color: var(--lnolight);
  /* button text */
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
  font-size: 16px;
  transition: background-color 0.2s;
}

.read-more a:hover {
  background-color: var(--lnodarkgreen);
  color: #FFF;
}



/* Left-align text inside content */
.portfolio-content h3,
.portfolio-content p,
.portfolio-content a {
  text-align: left;
  margin: 0 0 0.5em 0;
}

/* Responsive */
@media (max-width: 1024px) {
  .portfolio-item {
    width: 30%;
  }
}

@media (max-width: 768px) {
  .portfolio-item {
    width: 45%;
  }
}

@media (max-width: 480px) {
  .portfolio-item {
    width: 100%;
  }
}

/* Responsive layout for tablets and mobile */
@media (max-width: 768px) {

  .portfolio-item,
  .portfolio-item-home {
    flex-direction: column;
    align-items: stretch;
  }

  .portfolio-image {
    width: 100%;
  }

  .portfolio-image img {
    width: 100%;
    height: auto;
    display: block;
  }

  .read-more {
    justify-content: flex-start;
  }

}

.mid-container {
   display: flex;
  align-items: stretch; /* default, but important */
  background-color: #fef9e1;
}

.image-wrap img {
  display: block;
  height: 100%;
  object-fit: cover;
}

.mid-text {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2em 6em;
  gap: 2em;
}

.mid-text img {
  max-width: 100%;
  height: auto;
}

/* Mobile */
@media (max-width: 768px) {

  .mid-text {
    flex-direction: column;
    padding: 1.5em 1.5em;
    text-align: center;
  }

  .mid-text img {
    width: min(300px, 80%);
  }

}

h5.wp-block-heading {
  font-size: 1.4rem;
}

.custom-archive-wrapper {
  margin: 5em 0;
}



.portfolio-item {
  display: flex;
  gap: 1em;
  width: 100%;
  border: 1px solid var(--lnodarkgreen);
  border-radius: 6px;
  overflow: hidden;
  padding: 1em;
  /* soft cream background */
  box-sizing: border-box;
  align-items: flex-start;
}

.post h1 {
  font-size: clamp(1.38rem, calc(0.38vw + 1.3rem), 1.75rem);
}

.post h2 {
  font-size: clamp(1.13rem, calc(0.25vw + 1.07rem), 1.38rem);
  /* 18px -> 22px (320px -> 1920px) */
}


/* Add square bullet before each link in footer */
#nav_menu-2 li a::before {
    content: "■";          
    display: inline-block;
    width: 1em;           
    margin-right: 8px;    
    color: var(--lnolightorange);          
    font-size: 0.7em;      
    vertical-align: middle;
    
}




.entry-header::before {
  content: "";
  display: block;
  width: 15%;           /* line width */
  height: 5px;           /* line thickness */
  background-color: var(--lnolightorange);
  margin-bottom: 10px;    /* spacing between line and logo+title */
  border-radius: 2px;     /* optional rounded edges */

}


h1.page-title {
 font-size: clamp(2rem, 1.8333rem + 0.5556vw, 2.5rem);
 
}

h1.page-title::before {
  content: "";
  display: inline-block;
  background-image: url('https://staging.learningnetworks.ca/wp-content/themes/learning-networks/images/title-logo.webp');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: clamp(2rem, 1.8333rem + 0.5556vw, 2.5rem);
  height: clamp(2rem, 1.8333rem + 0.5556vw, 2.5rem);
  margin-right: 0.4em;
  vertical-align: middle;
}

.entry-content h1 {
  font-size: clamp(1.7rem, 1.5333rem + 0.5556vw, 2.2rem);
  
}

.entry-content h2 {
  font-size: clamp(1.375rem, 1.25rem + 0.4167vw, 1.75rem);
  
}

.info-box {
  background-color: #f3e4da;
  padding:1em;
  margin: 1em 0;
  border-radius: 2px;
  border: 1px solid var(--lnoorange)
}

.info-box h2 {
  color: var(--lnoorange);
}

/* CONTACT ********************************************************/
.responsive-iframe {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* You can change this to 4 / 3, etc. */
}

.responsive-iframe iframe {
  width: 100%;
  height: 100%;
  border: 5px solid var(--lnodarkgreen);
}

/* FOOTER ********************************************************/

.figure {
  margin: 2em 0;
}

figcaption {
  font-size: 16px !important;
  line-height: 1.5em !important;
  margin-top:0.5em !important;
}

.menu-footer ul li {
  display: flex !important;
  align-items: center !important;
}

/* Footer Socials Styling */
.footer-socials {
  display: flex;
  gap: 16px; /* spacing between icons */
  align-items: center;
}

.footer-socials .social-link svg {
  width: 38px;
  height: 38px;
  fill:var(--lnolight); /* default icon color */
  transition: fill 0.3s;
}

.footer-socials .social-link:hover svg {
  fill: var(--lnoorange); /* hover color (change per brand if desired) */
}

.contact_right {
  background-color: var(--lnolight);
  padding: 1em;
}

.contact_form {
  padding:4em 0;
}

button.forminator-button {
  padding: 0.5em 1em;
  background-color: var(--lnogreen);
  text-decoration: none;
  border-radius: 4px !important;
  font-size: 16px !important;
  transition: background-color 0.2s;
  color: #FFF !important;

}

button.forminator-button:hover {
  background-color: var(--lnodarkgreen);
  
}

.forminator-field label {
  font-size: clamp(1rem, calc(0.25vw + 0.95rem), 1.25rem) !important;
}

/* Government Acknowledgement *****************************************************/

.acknowledge {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:0 0 3.5em 0;
}

.acknowledge .inner {
  width: 70%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.acknowledge .col {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.acknowledge img {
  max-width: 100%;
  height: auto;
  display: block;
}

.acknowledge .full-row {
  width: 100%;
  text-align: center;
 }

.acknowledge .full-row p {
  margin: 0;
}

@media (max-width: 768px) {
  .acknowledge .inner {
    width: 100%;
  }

  .acknowledge .col {
    width: 100%;
  }
}

/* VIDEO ***************************************************************************/

.video-container {
  position: relative;
  width: 100%;
  /* 16:9 Aspect Ratio */
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 12px; /* modern rounded corners */
  box-shadow: 0 6px 10px rgba(0,0,0,0.2); /* subtle shadow */
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ALSO FOOTER ************************************************************************/

.also {
    max-width: var(--theme-content-width);
    margin: 1em auto 0 auto;
}

.also ul li a {
  text-decoration: underline;
}

/* INFO TABLE ************************************************************************/

.ui-spec-list {
  max-width: 100%;
  margin: 30px 0;
  font-family: inherit;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  overflow: hidden;
}

.ui-spec-list .spec-item {
  display: table;
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
}

.ui-spec-list .spec-item:last-child {
  border-bottom: none;
}

.ui-spec-list .spec-label,
.ui-spec-list .spec-value {
  display: table-cell;
  vertical-align: middle;
  padding: 1em;
}

.ui-spec-list .spec-label {
  width: 220px;
  font-weight: 600;
  background: var(--lnolight);
  border-radius: 4px 0 0 4px;
}

.ui-spec-list .spec-value {
  padding-left: 12px;
  line-height: 1.5;
}

@media (max-width: 600px) {
  .ui-spec-list .spec-item {
    display: block;
  }

  .ui-spec-list .spec-label,
  .ui-spec-list .spec-value {
    display: block;
    width: 100%;
    padding-left: 1em;
    padding-right: 1em;
    margin-bottom: 6px;
    border-radius: 4px;
  }

  .ui-spec-list .spec-item:last-child .spec-value {
    margin-bottom: 0;
  }
}

/*  PAGE QUOTES *****************************************************************/

.ui-quote {
  
  max-width: 100%;
  margin: 30px auto;
  padding: 20px 25px;
  border-left: 5px solid var(--lnoorange);
  background: #f9f9f9;
  color: #333;
  border-radius: 6px;
  text-align: left;
}

.ui-quote p {
  margin: 0 0 10px 0;
  line-height: 1.6;
}

.ui-quote .quote-author {
  display: block;
  text-align: right;
  font-weight: 600;
  font-style: normal;
  font-size: 0.95rem;
  color: #555;
}

/* Mobile adjustments */
@media (max-width: 600px) {
  .ui-quote {
    padding: 15px 20px;
  }

  .ui-quote::before {
    font-size: 2.2rem;
    top: 5px;
    left: 5px;
  }
}

/* INFOGRAPHICS ***********************************************************************/

@media (max-width: 748px) {
  #infographics .panel-grid-cell {
    padding-left: 20px;
    padding-right: 20px;
  }
}



/* VIDEO (MP4) **********************************************************************/
@media (min-width:748px) {
  #video {
  margin-bottom: 2em;
}
}

.responsive-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 ratio — change if needed */
  overflow: hidden;
}

.responsive-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* or "contain" if you want full video visible */
}

/* MOBILE MENU FIX ********************************************************************/

.mobile-menu li > a {
    padding: 12px 0 !important;
}

/* GTRANSLATE ****************************************************************************/

/* Hide the main "current language" wrapper link behavior */
.menu-item-gtranslate > a {
    pointer-events: none;
}

/* Show dropdown always (turn it into inline flags) */
.menu-item-gtranslate .sub-menu {
    display: flex !important;
    position: static !important;
    flex-direction: row;
    gap: 8px;
    padding: 0;
    margin: 0;
}

/* Hide the duplicate first flag (current language) */
.menu-item-gtranslate > a img {
    display: none;
}

/* Remove dropdown styling */
.menu-item-gtranslate .sub-menu {
    background: none;
    box-shadow: none;
}

/* Align nicely in header */
.menu-item-gtranslate {
    display: flex;
    align-items: center;
}

/* Kill all transform/animation on the translate menu item */
.menu-item-gtranslate,
.menu-item-gtranslate * {
    transform: none !important;
    animation: none !important;
    transition: none !important;
}

/* Specifically target hover states */
.menu-item-gtranslate:hover,
.menu-item-gtranslate a:hover,
.menu-item-gtranslate img:hover {
    transform: none !important;
}

/* SEARCH *****************************************************************************/

/* Remove hover background */
.ct-header-search:hover,
.ct-header-search:focus,
.ct-header-search:active {
  background: transparent !important;
  box-shadow: none !important;
}

/* Style the search form flex container */
#search-modal .ct-search-form {
    display: flex !important;
    align-items: center;
    width: 100% !important;
    max-width: 50%; /* adjust if needed */
    background: transparent !important; /* remove any background */
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Style the input as just a bottom line */
#search-modal .modal-field {
    flex: 1 1 auto !important;
    border: none !important;
    border-bottom: 2px solid #FFF !important; /* the line color */
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0.25em 0 !important;
    font-size: 2.5em !important;
    color: #FFF !important; /* text color */
    margin-right: 1.5em;     /* spacing from button */
    outline: none !important;
}

/* Keep your button as before */
#search-modal [data-button="icon"] {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 50px !important;
    height: 50px !important;
    background: var(--lnolightorange) !important;
    border: 1px solid #FFF !important;
    padding: 0 !important;
    color: #fdfcfc !important;
    flex-shrink: 0;
    border-radius: 6px !important;
    z-index: 10;
}

/* Show the icon */
#search-modal .ct-search-button-content {
    display: block !important;
    width: 25px !important;
    height: 25px !important;
    fill: currentColor !important;
    stroke: none !important;
}

/* Hide loader */
#search-modal .ct-ajax-loader {
    display: none !important;
}

.glink img {
  margin: 0 5px !important;
}

/* IN THIS SECTION ********************************************************************/

/* Apply the box to the entire widget (including title) */
.in-this-section {
  background: var(--lnolight);
  margin-bottom: 40px;
  overflow: hidden;
}

.in-this-section .widget-title {
  padding: 20px 25px 10px;
  margin: 0;
  font-size: 1.4rem;
  color: var(--lnogreen);
}

/* Content area */
.in-this-section .textwidget,
.in-this-section .widget-content {
  padding: 0 25px 20px;
}

/* Links */
.in-this-section .links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* 🔑 prevents full-width stretching */
  gap: 6px;
}

.in-this-section .links a {
  display: inline-block;   /* 🔑 keeps link tight to text */
  width: auto !important;
  padding: 0;
  background: none;
  color: var(--lnogreen);
  text-decoration: underline !important;
  font-weight: 500;
}

.in-this-section .links a:hover {
  color: var(--lnoorange);
}

@media (max-width: 768px) {
  .in-this-section .links {
    gap: 10px;
  }
}

.hide {
  display: none !important;
}