/** 
 * Theme Name: Shore Local News
 * Theme URI: https://jacobrossdev.com
 * Description: Child theme for Shore Local News website. 
 * Author: Jacob Ross Web Development
 * Author URI: https://jacobrossdev.com
 * Template: Divi
 */

:root {
  --yellow: #eeb94c;
  --slate-blue: #004261;
  --sky-blue: #2D7BDC;
  --red: #ED2526;
}

* {position: relative; }
p:empty { display: none; }

/* ------------------------------
  SCAFFOLDING
------------------------------ */
main#shorelocal-wrapper { min-height: 500px; }
main#shorelocal-wrapper .shorelocal-container { flex: 0 0 100%; max-width: 1700px; margin: 0 auto; min-height: 100px; padding-top: 50px; padding-left: 15px; padding-right: 15px; display: flex;}
main#shorelocal-wrapper > .shorelocal-container { gap: 15px; padding-bottom: 100px; }
/* ------------------------------
  HEADER
------------------------------ */
header#shorelocal-header { z-index: 10; }
header#shorelocal-header .shorelocal-banner { background-size: cover; height: 560px; background-position: center; }
header#shorelocal-header .nav-logo {padding-left: 15px; padding-right: 15px; min-width: 180px; max-width: 250px;}
header#shorelocal-header .shorelocal-menus #shorelocal-logo { top: 50%; transform: translateY(-50%); }

header#shorelocal-header .banner-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #202020; opacity: 0.7; }
header#shorelocal-header .banner-message { transition: all 1s ease-in-out; position: absolute; left: 50%; top: 50%; opacity: 0; transform: translate(-50%, calc(-50% + 60px));    font-size: 48px; color: #fff; font-weight: bold; text-align: center; max-width: 75%; line-height: 1.15; width: 100%; }
header#shorelocal-header .banner-logo { transition: all 1s ease-in-out; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 0; }

header#shorelocal-header .shorelocal-banner .banner-message.active { transform: translate(-50%, -50%); opacity: 1;}
header#shorelocal-header .shorelocal-banner .banner-logo.active { opacity: 1; }

header#shorelocal-header .shorelocal-social-list { position: absolute; top: 15px; right: 20px; }
@media screen and (max-width: 680px) {
  header#shorelocal-header .shorelocal-banner { height: 250px; }
}

@media screen and (max-width: 767px){
header#shorelocal-header .shorelocal-social-list { position: absolute; top: 15px; right: 50%; transform: translateX(50%); z-index: 1; }
  header#shorelocal-header .banner-message {font-size: 18px; max-width: 90%; line-height: 1.2; }
}


/* ------------------------------
  NAVIGATION
------------------------------ */
header#shorelocal-header nav { display: flex;  position: relative; background-color:#2D7BDC; height: 60px; }
header#shorelocal-header nav .menu-half { flex: 1; display: flex; }
header#shorelocal-header nav .menu-half li { align-items: center; }
header#shorelocal-header nav .menu-half > li .sub-menu li:last-child { border-radius: 0 0 8px 8px; }
header#shorelocal-header nav .menu-half a { display: flex; height: 60px; white-space: nowrap; align-items: center; color: #fff; padding-left: 12px; padding-right: 12px; }

header#shorelocal-header nav .menu-half li.menu-item-has-children > a:after { content: ''; display: inline-block; width: 6px; height: 6px; border-width: 0 3px 3px 0; border-style: solid; border-color: #fff; background-size: 60%; background-position: center; background-repeat: no-repeat; transform: rotate(45deg) translateY(-2px); border-radius: 2px; margin-left: 10px; }
header#shorelocal-header nav .menu-half .sub-menu li.menu-item-has-children a:after { content: ''; border-color: var(--slate-blue); }

header#shorelocal-header nav .menu-half li.menu-item-has-children .sub-menu { position: absolute; top: 52px; padding-top: 8px; z-index: 1; }
header#shorelocal-header nav .menu-half li.menu-item-has-children .sub-menu:before { content: ''; display: block; height: 3px; width: 100%; top: 8px; position: absolute; background-color: var(--yellow); z-index: 1; }
header#shorelocal-header nav .menu-half li.menu-item-has-children .sub-menu li { background-color: #fff; }
header#shorelocal-header nav .menu-half li.menu-item-has-children .sub-menu a { color: var(--slate-blue); transition: all 0.3s ease-in-out; white-space: nowrap; height: 40px; padding-left: 20px; padding-right: 20px; }
header#shorelocal-header nav .menu-half li.menu-item-has-children .sub-menu a:hover { color: #3582a7; }

header#shorelocal-header nav .menu-half li.menu-item-has-children:hover > .sub-menu { display: block; }
header#shorelocal-header nav .menu-half .sub-menu .sub-menu { padding-top: 0; padding-left: 8px !important; right: 8px; top: 0 !important; transform: translateX(100%); }
header#shorelocal-header nav .menu-half .sub-menu .sub-menu:before { padding-top: 0; padding-left: 8px; top: 0; width: calc(100% - 16px) !important; }

header#shorelocal-header nav .sub-menu { display: none; }

header#shorelocal-header nav #nav-left { margin-left: auto; justify-content: flex-end; }


@media screen and ( max-width: 1185px ){
  header#shorelocal-header nav #nav-left, 
  header#shorelocal-header nav #nav-right {display: none;}
  header#shorelocal-header nav {display: flex; justify-content: center; }
  header#shorelocal-header nav .nav-logo { max-width: 200px; }
  main#shorelocal-wrapper .shorelocal-sidebar { min-width: 150px; }
}

@media screen and (max-width: 768px){
  main#shorelocal-wrapper .shorelocal-container {flex-direction: column;}
  main#shorelocal-wrapper .shorelocal-advertisement #sidebar { display: flex; flex-wrap: wrap; gap: 15px; }
}
@media screen and (min-width:1186px){
  #mobile-nav-button {display: none;}
}

@media screen and (max-width:1185px){
  /* Mobile nav button */
  #mobile-nav-button { width: 45px; height: 50px; z-index: 100; margin-left: auto; position: absolute; right: 5px; }
  #mobile-nav-button:before { content: ""; position: absolute; left: 8px; top: 19px; width: 29px; height: 4px; background: #fff; box-shadow: 0 9px 0 0 #fff, 0 18px 0 0 #fff; }    
}

@media screen and (max-width:680px){
  main#shorelocal-wrapper .shorelocal-articles { flex-direction: column; }
}

/* ------------------------------
  ARTICLES
------------------------------ */
#main-content { padding-top: 50px; }
/* main#shorelocal-wrapper .shorelocal-articles { display: flex; gap: 30px; flex: 1; }
main#shorelocal-wrapper .shorelocal-articles > div { flex: 1; } */

main#shorelocal-wrapper .shorelocal-sidebar li { margin-bottom: 15px; border-radius: 30px; box-shadow: 0 0 0px 2px var(--sky-blue) inset; background-color: #fff; overflow: hidden; }
main#shorelocal-wrapper .shorelocal-sidebar li:after { content: ''; transition: all 0.3s ease-in-out; display: block; opacity: 0; right: 40px; background-image: url(assets/images/nautical-arrow-white.png); position: absolute; aspect-ratio: 1 / 2; height: 70%; top: 50%; transform: translateY(-50%); background-size: cover; } 
main#shorelocal-wrapper .shorelocal-sidebar li a { color: #fff; font-weight: 500; background-color: var(--sky-blue); padding: 6px 6px 6px 12px;; display: block; width: 100%; transition: all 0.3s ease-in-out; }

main#shorelocal-wrapper .article-sidebar-search { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ccc; }
main#shorelocal-wrapper .article-sidebar-search input[type="text"] { width: calc(100% - 62px); height: 30px; border-radius: 3px; padding-left: 4px; padding-right: 4px;}
main#shorelocal-wrapper .article-sidebar-search #searchsubmit { height: 30px; border-radius: 3px; border: 1px solid rgb(187, 187, 187) }

main#shorelocal-wrapper .shorelocal-advertisement { flex: 1; }
main#shorelocal-wrapper .shorelocal-advertisement #sidebar { width: 100%; float: none; }

@media screen and (min-width: 769px){
  main#shorelocal-wrapper .shorelocal-advertisement { max-width: 250px; }
  main#shorelocal-wrapper .shorelocal-sidebar li:hover:after { right: 14px; opacity: 1;}
  main#shorelocal-wrapper .shorelocal-sidebar { max-width: 250px; min-width: 210px; flex: 0 0 25%; }
  main#shorelocal-wrapper .shorelocal-rollout { padding-top: 50px; min-width: 398px;}
}

@media screen and (max-width: 768px){
  main#shorelocal-wrapper ul#menu-articles { display: flex; flex-wrap: wrap; gap: 8px; }
  main#shorelocal-wrapper ul#menu-articles li { margin-bottom: 8px; }
  main#shorelocal-wrapper ul#menu-articles li a { padding: 4px 16px; font-size: 15px; }
}

/* ------------------------------
  HOMEBLOCK 
------------------------------ */
main#shorelocal-wrapper .shorelocal-rollout { flex: 1; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock-container { margin-bottom: 25px; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock > .row { display: flex; margin-bottom: 15px; gap: 15px; border-bottom: 1px solid #ddd; padding-bottom: 20px; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock > .row:last-child {border-bottom: 0; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock .column { flex: 1; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock .column:last-child { display: flex; flex-direction: column; gap: 15px; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock .column:last-child .row { flex: 1; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock .column:last-child img { height: 213px; }


main#shorelocal-wrapper .shorelocal-rollout .homeblock > .row > .column .block { display: flex; flex-direction: column; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock > .row > .column:first-child .block-thumbnail { aspect-ratio: 560 / 490; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock > .row > .column:last-child .block-thumbnail { aspect-ratio: 560 / 202; }

main#shorelocal-wrapper .shorelocal-rollout .homeblock .column .block-title { aspect-ratio: 560 / 60; padding-top: 10px; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock .column .block-thumbnail { background-color: grey; background-size: cover; border-radius: 8px; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock .column .block-thumbnail a { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }


main#shorelocal-wrapper .shorelocal-rollout .homeblock h2 { padding-bottom: 0; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock h3 { font-size: 17px; font-weight: bold; line-height: 1.3; padding: 0; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock figure { line-height: 0; display: block; }
main#shorelocal-wrapper .shorelocal-rollout .homeblock img { border-radius: 8px; }

.more-link-container { display: block !important; }

.more-link-container a { color:#a9151b; }
.more-link-container a:hover { text-decoration: underline; }

@media screen and (max-width: 1100px){
  main#shorelocal-wrapper .shorelocal-rollout .homeblock .row { flex-direction: column; }
}

/* -----------------------------------
  ISSUES SLIDER
--------------------------------------*/

main#shorelocal-wrapper .shorelocal-issues-slider .shorelocal-current-issue { max-width: 270px; margin-top: -60px;}

main#shorelocal-wrapper .shorelocal-issues-slider {width: 100%; background-color: #ffeecb; padding-left: 30px; padding-right: 30px; }
main#shorelocal-wrapper .shorelocal-issues-slider-container {position: relative; float: none; overflow: hidden; }
main#shorelocal-wrapper .shorelocal-issues-slider-container .inner {  z-index: 1; margin-left: auto; margin-right: auto; overflow-x: hidden; display: flex; align-items: center; justify-content: center; padding-left: 60px; padding-right: 60px; }
main#shorelocal-wrapper .shorelocal-issues-slider-container .issues-slider-container { overflow: hidden; width: 100%; padding: 30px 0;}

main#shorelocal-wrapper .shorelocal-issues-slider-container .issues-slider { transition: all 0.5s ease-in-out; display: flex; align-items: center; }
main#shorelocal-wrapper .shorelocal-issues-slider-container .issue-slide { box-sizing: border-box; opacity: 0; }
.issue-box { height: 100%; padding: 0; }
.inner-box { display: flex; height: 100%; justify-content: center; }
.issue-label { position: absolute; bottom: 7px; left: 50%; width: 80%; text-align: center; background-color: #fff; font-weight: bold; transform: translateX(-50%); line-height: 1.2;
    font-size: 14px;
    padding: 4px;}
main#shorelocal-wrapper .shorelocal-current-issue .issue-label { position: absolute; bottom: 20px; left: 50%; width: 80%; text-align: center; background-color: #fff; font-weight: bold; transform: translateX(-50%); }

main#shorelocal-wrapper .shorelocal-issues-slider-container .prev-slide,
main#shorelocal-wrapper .shorelocal-issues-slider-container .next-slide { text-align: center; z-index: 10; transition: opacity 0.4s ease-in-out; width: 60px; height: 45px; position: absolute; }

main#shorelocal-wrapper .shorelocal-issues-slider-container .prev-slide img,
main#shorelocal-wrapper .shorelocal-issues-slider-container .next-slide img { aspect: 1/2; height: 45px; }
main#shorelocal-wrapper .shorelocal-issues-slider-container .prev-slide img { rotate: 180deg; }

/* STACK SLIDER AND CONTROLS */
main#shorelocal-wrapper .shorelocal-issues-slider-container.stack .inner {padding-left: 0; padding-right: 0; padding-bottom: 60px; } 
main#shorelocal-wrapper .shorelocal-issues-slider-container.stack .prev-slide,
main#shorelocal-wrapper .shorelocal-issues-slider-container.stack .next-slide { bottom: 0; }
main#shorelocal-wrapper .shorelocal-issues-slider-container.stack .prev-slide { left: 50%;  transform:translateX(calc(-100% - 10px))}
main#shorelocal-wrapper .shorelocal-issues-slider-container.stack .next-slide { right: 50%; transform:translateX(calc(100% + 10px)) }

main#shorelocal-wrapper .shorelocal-issues-slider-container .prev-slide,
main#shorelocal-wrapper .shorelocal-issues-slider-container .next-slide { top: 50%; transform: translateY(-50%); }
main#shorelocal-wrapper .shorelocal-issues-slider-container .next-slide { right: 0; } 

@media screen and ( max-width: 1480px ) {
  main#shorelocal-wrapper .issues-slider-container {max-width: calc( 415px * 2)}
}
@media screen and ( min-width: 676px ){
  main#shorelocal-wrapper .shorelocal-issues-slider .shorelocal-current-issue { float: left; }
}

@media screen and ( max-width: 675px ){
  main#shorelocal-wrapper .shorelocal-current-issue {text-align: center;}
  main#shorelocal-wrapper .shorelocal-issues-slider .shorelocal-current-issue { margin-left: auto; margin-right: auto; }
  main#shorelocal-wrapper .shorelocal-issues-slider-container {display: none;}
  main#shorelocal-wrapper .shorelocal-issues-slider-container .inner {padding-left: 0; padding-right: 0; padding-bottom: 60px; } 
  main#shorelocal-wrapper .shorelocal-issues-slider-container .prev-slide,
  main#shorelocal-wrapper .shorelocal-issues-slider-container .next-slide { bottom: 0; }
  
  main#shorelocal-wrapper .shorelocal-issues-slider-container .prev-slide { left: 50%;  transform:translateX(calc(-100% - 10px))}
  main#shorelocal-wrapper .shorelocal-issues-slider-container .next-slide { right: 50%; transform:translateX(calc(100% + 10px)) }
  main#shorelocal-wrapper .issue-slide {flex-direction: column;}
} 

/* ------------------------------
  FOOTER 
------------------------------ */
footer#shorelocal-footer .footer-topbar { display: flex; justify-content: center; background-color: var(--red); text-align: center; padding: 10px 15px; }
footer#shorelocal-footer .footer-topbar img { width: 200px; }
footer#shorelocal-footer .footer-main { background-color: #2D7BDC; color: #fff; display: flex; justify-content: center; padding: 30px 15px; }
footer#shorelocal-footer .footer-main a { color: #fff; }
footer#shorelocal-footer .footer-main .et_pb_widget { float: none; }
footer#shorelocal-footer .footer-main .container { max-width: 1700px; gap: 30px; display: flex; align-items: flex-start; justify-content: space-between; }
footer#shorelocal-footer .footer-main .container .column { flex: 1; }
footer#shorelocal-footer .footer-main .container .column.footer-contact address a { display: flex; align-items: center; gap: 10px; }
footer#shorelocal-footer .footer-main .container .column.footer-logo { text-align: center; }
footer#shorelocal-footer .footer-main .container .column.footer-socials { display: flex; justify-content: flex-end; }
footer#shorelocal-footer .footer-main h4 {color: #fff; font-weight: bold;  }
footer#shorelocal-footer .footer-main address { line-height: 1.6; font-size: 24px; }

footer#shorelocal-footer .footer-main .footer-socials a { background-color: var(--red); }

footer#shorelocal-footer .footer-copyright { background-color: #2D7BDC; color:#fff; text-align: center; padding: 10 15px;}

@media screen and (max-width: 1100px){
	footer#shorelocal-footer .footer-main .container .column.footer-contact address a {
    justify-content: center;
}
	footer#shorelocal-footer .footer-main h4 { text-align: center; }
  footer#shorelocal-footer .footer-main .container {flex-direction: column; align-items: center;}
}

/* -----------------------------------
 ISSUE ROLLOUT
--------------------------------------*/
#shorelocal-issues-rollout { display: grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: auto auto; }
#shorelocal-issues-rollout .issue-column {}

#issues-rollout-pagination {padding-top: 40px; }
#issues-rollout-pagination .page-numbers { display: inline-block; text-align: center; font-size: 22px; padding: 5px; }


/* -----------------------------------
  MOBILE MENU
--------------------------------------*/
body.menu-open header.header { position: relative; z-index: 1010; }
body.menu-open #mobile-menu { display: block; }
body.menu-open .mobile-menu-drawer { transform: translateX(0); opacity: 1; }
#mobile-menu { position: absolute; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); left: 0; top: 0; bottom: 0; right:0; z-index: 1000; display: none; }
#mobile-menu-icon {display: none;}
.mobile-menu-drawer { width: 100%; background-color: #006dae; left: 0; top: 0; transform: translateX(-100%); height: 100%; overflow-y:auto; position: absolute; transition: all 0.3s linear; z-index: 1001; opacity: 0; }
.mobile-menu-drawer .menu-item-has-children .dd { color: #FFEDC8; font-size: 2rem; width: 33%; text-align: center; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; height: 40px; }
.mobile-menu-drawer .menu-item-has-children { position: relative; }
.mobile-menu-drawer ul { list-style: none; padding: 0; margin: 0; }
.mobile-menu-drawer .sub-menu { height: 0; transition: all 0.2s ease-in-out; overflow: hidden; }
.mobile-menu-drawer li.menu-item-has-children.active .sub-menu { height: auto; }
.mobile-menu-drawer li:hover a { text-decoration: none; }
.mobile-menu-drawer li:hover { background-color: #003b79; border-bottom: 1px solid #003b79; }
.mobile-menu-drawer li { border-bottom: 1px solid #3d9ed9; }
.mobile-menu-drawer a { color:#FFEDC8; list-style: none; padding: 8px 20px 6px; margin: 0; display: block; flex: 1; }
.mobile-menu-header { text-align: right; font-size: 21px; color: #fff; }
.mobile-menu-header .close-button { display: inline-block; width: 40px;}
.mobile-menu-header .dashicons { font-size: 31px; right: 14px; top: 2px; }