/*
Theme Name: Divi Child
Theme URI: https://www.nwpky.com/
Description: Divi Child Theme for Customizations.
Author: NWPKY
Author URI: https://www.nwpky.com/
Template: Divi
Version: 1.0.0
*/

/**
 * VARIABLES
 * Colors....................................Global colors.
 * Borders...................................Global borders.
 * Sizings & Spaces..........................Global sizings and spaces.
 *
 * CUSTOM FONTS
 * Trenda Bold
 * Trenda Black
 * Vinci Sans
 *
 * HERO SLIDER
 * Custom Row.................................Width, Margins & Border Radius.
 * Custom Slide...............................Reset Padding.
 *
 * SEARCH RESULTS
 *
 * CPT PHOTOS
 * Article...................................Custom styles.
 *
 * BLOG - MEDIA HISTORY
 * Article...................................Custom styles.
 * Entry Title
 * Entry Title Underline
 * Post Meta Anchor
 * Featured Post Styles
 *
 * REMOVE SALVATTORE'S SYSTEM
 * Global Remove Salvattore’s column system and create 4 columns
 *
 * SUB NAVIGATION
 * Media Query
 *
 * MAIN MENU SMALL SCREENS
 *
 * PRICE TITLE
 * Article...................................Custom styles.
 *
 * UTILITIES
 * Card Light & Large Title with Border
 * Underline Title
 * Global Row Width for Small Screens
 * 
 * DIVI CHILD GLOBALS
 * Global Row Width for Small Screens
 * Disable Search Icon
 * Titles & Texts Color
 * Display:none for Sidebar in Single Pages
 * Fotter Menu in column - Hamburger icon display:none
 * Header Menu - Line Height Dropdown Sub-menu
 *
 * BUTTONS
 *
 * FOOTER MENU SUB-MENU VISIBLE
 *
 * TOLL RATES & FEE TABLE SCROLL-X 
 *
 * LOGO SIZE FOR SMALL SCREENS
 */

/* Debuggin */
/* * {
  box-sizing: border-box;
  outline: 1px solid limegreen !important;
} */

/* Sticky para cabecera de tablas
    position: sticky;
    top: 110px;
    z-index: 100; */

/*  VARIABLES
   ========================================================================== */

:root {
  /* Colors */
  --clr-accent: #52c1dd;
  --clr-dark: #052145;
  --clr-light: #ffffff;

  /* Fonts */
  --fs-normal: clamp(1.125rem, 1.0815rem + 0.2174vw, 1rem);
  --fs-large: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  --fs-x-large: clamp(3rem, 3rem + 0.5793vw, 2rem);

  /* Borders */
  --border-m: 4px;
  --border-radius-l: 30px;

  /* Sizings & Spaces */
  --global-width-small-screens: 92%;
  --height-card-photos: 300px;
  --space-m: 20px;
  --space-l: 50px;
  --underline-title: 120px;

  /* Box Shadow */
  /* --global-box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px,
    rgba(0, 0, 0, 0.3) 0px 18px 36px -18px; */

  --global-box-shadow: rgba(50, 50, 93, 0.3) 0px 15px 30px -12px,
    rgba(0, 0, 0, 0.5) 0px 9px 18px -18px;
}

body {
  margin-top: 164px;
}

@media (max-width: 958px) {
  body {
    margin-top: 124px;
  }
}

html {
  scroll-padding-top: 148px;
}

a {
  color: var(--clr-accent);
}

/*  CUSTOM FONTS
   ========================================================================== */

@font-face {
  font-family: "Trenda Bold";
  src: url("fonts/trenda-bold.woff2") format("woff2"),
    url("fonts/trenda-bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Trenda Black";
  src: url("fonts/trenda-black.woff2") format("woff2"),
    url("fonts/trenda-black.woff") format("woff");
  font-weight: 800;
  font-style: normal;
}

@font-face {
  font-family: "Vinci Sans";
  src: url("fonts/vinci-sans.woff2") format("woff2"),
    url("fonts/vinci-sans.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

.fs-normal {
  font-size: var(--fs-normal);
}

.fs-x-large {
  font-size: var(--fs-x-large);
}

.trenda-bold {
  font-family: "Trenda Bold";
}

.trenda-black {
  font-family: "Trenda Black";
}

.vinci {
  font-family: "Vinci Sans";
}

/*  COLORS
   ========================================================================== */

.text-dark {
  color: var(--clr-dark);
}

/*  HERO SLIDER
   ========================================================================== */

/* Custom Row */
#nwp-hero-slider .et_pb_row {
  width: 100% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Custom Slide */
#nwp-hero-slider .et_pb_slide {
  padding: 0 !important;
}

/* Featured Image */
@media only screen and (max-width: 767px) {
  #nwp-hero-slider .et_pb_image_wrap img {
    width: auto;
    height: 400px;
    object-fit: cover;
    object-position: 0 -200px;
  }
}

@media only screen and (max-width: 980px) {
  #nwp-hero-slider .et_pb_image_wrap img {
    width: 1500px;
  }
}

@media only screen and (max-width: 1100px) {
  #nwp-hero-slider .et_pb_image_wrap img {
    min-height: 700px;
    object-fit: cover;
  }
}

/*  SEARCH RESULTS
   ========================================================================== */

.search-results #left-area article:not(:last-of-type) {
  padding-block-end: 32px;
  border-bottom: 3px solid var(--clr-accent) !important;
}

.search-results article .entry-title {
  color: var(--clr-dark);
}

.search-results article .post-meta {
  font-size: 18px !important;
  color: var(--clr-dark) !important;
}

/*  CPT PHOTOS
   ========================================================================== */

#nwp-photos .et_pb_post {
  background-color: transparent;
  border-radius: var(--border-radius-l);
  padding: 0 !important;
  border: none !important;
  box-shadow: var(--global-box-shadow);
}

/* Article */
#nwp-photos article,
#nwp-photos-archive article {
  position: relative;
  height: var(--height-card-photos);
  border-radius: var(--border-radius-l);
  overflow: hidden !important;
}

#nwp-photos article::before,
#nwp-photos-archive article::before {
  --icon-size: 44px;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f061";
  display: grid;
  place-items: center;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 100vmin;
  font-size: 20px;
  margin-inline-start: calc(100% - var(--icon-size) - 1rem);
  margin-block-start: 1rem;
  color: var(--clr-dark);
  background-color: var(--clr-light);
}

#nwp-photos article .et_pb_image_container {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: calc(var(--height-card-photos) + 50px);
  border-radius: var(--border-radius-l);
}

#nwp-photos-archive article a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(var(--height-card-photos) + 50px);
  border-radius: var(--border-radius-l);
}

#nwp-photos article .et_pb_image_container a img,
#nwp-photos-archive article a img {
  height: calc(var(--height-card-photos) + 50px);
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* Adds a pseudo-element ::before to the anchor tag inside the article, 
  positioning it absolutely relative to the article container. 
  This ensures the link covers the entire card of the post, making the entire area clickable. */
#nwp-photos article .entry-title a {
  position: absolute;
  display: flex;
  align-items: flex-end;
  padding-inline: 1.5rem;
  padding-block-end: 1.5rem;
  inset: 0;
  color: var(--clr-light);
}

#nwp-photos article .entry-title a::before {
  content: "";
  position: absolute;
  inset: 0;
}

#nwp-photos article .et_pb_image_container a {
  position: relative;
  /*  width: 450px !important; */
  width: 760px !important;
  height: calc(var(--height-card-photos) + 50px);
  background-color: #05214550;
}

/*  BLOG - MEDIA HISTORY
   ========================================================================== */

/* Article */
#nwp-blog article {
  /*  display: flex; */
  position: relative;
  padding-block-end: 2rem;
}

#nwp-blog article .et_pb_image_container {
  margin-block-end: 0;
  border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
  overflow: hidden !important;
}

#nwp-blog article .et_pb_image_container a {
  margin-block-end: 0;
  border-radius: var(--border-radius-l) var(--border-radius-l) 0 0;
}

#nwp-blog .et_pb_post {
  /*   width: 320px; */
  border-radius: var(--border-radius-l);
  border: none !important;
  background-color: white;
  overflow: visible !important;
  box-shadow: var(--global-box-shadow);
}

@media (min-width: 980px) {
  #nwp-blog .et_pb_post {
    width: 100%;
    /*    background-color: white;
    border-radius: var(--border-radius-l);
    border: none !important;
    overflow: visible !important;
    box-shadow: var(--global-box-shadow); */
  }
}

/* Entry Title */
#nwp-blog .entry-title {
  margin-block: 1.5rem 0.5rem;
}

/* Adds a pseudo-element ::before to the anchor tag inside the article, 
  positioning it absolutely relative to the article container. 
  This ensures the link covers the entire card of the post, making the entire area clickable. */
#nwp-blog .entry-title a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

#nwp-blog .entry-title::after {
  content: "";
  display: block;
  width: var(--underline-title);
  height: 4px;
  margin-block-start: 20px;
  background-color: var(--clr-accent);
}

#nwp-blog .entry-title,
#nwp-blog .post-meta,
#nwp-blog .post-content {
  margin-inline: 0.5rem;
}

.et_post_meta_wrapper .entry-title {
  position: relative;
  margin-block-end: 16px;
  font-family: "Trenda Bold";
  font-size: 48px;
  color: var(--clr-dark);
}

/* Entry Title Underline */
.et_post_meta_wrapper .entry-title::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: var(--underline-title);
  height: 4px;
  background-color: var(--clr-accent);
}

/* Post Meta Anchor */
.et_post_meta_wrapper .post-meta a {
  font-family: "Trenda Bold";
  font-size: 24px;
  color: var(--clr-dark) !important;
}

/* Featured Post Styles */
.featured-post div article {
  display: flex;
  position: relative;
  gap: 24px;
  margin-bottom: 0;
  margin-bottom: 24px;
  border-radius: 32px;
  box-shadow: var(--global-box-shadow);
}

@media (max-width: 1024px) {
  .featured-post div article {
    display: flex;
    flex-direction: column;
  }
}

.featured-post div article .entry-featured-image-url {
  width: 100%;
  height: auto;
  margin-bottom: 0;
}

.featured-post div article a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 32px 0 0 32px;
}

.featured-post-wrapper {
  padding: 40px 32px 40px 32px;
}

.nwp-post-articles div article {
  border-radius: 32px;
  box-shadow: var(--global-box-shadow);
}

.nwp-post-articles div article .entry-title {
  padding: 24px;
}

.nwp-post-articles div article .post-meta {
  padding: 0 24px;
}

.nwp-post-articles div article .post-content {
  padding: 16px 24px 24px 24px;
}

.featured-post-wrapper .entry-title::after,
.nwp-post-articles div article .entry-title::after {
  content: "";
  display: block;
  width: var(--underline-title);
  height: 4px;
  margin-block-start: 20px;
  background-color: var(--clr-accent);
}

.nwp-post-articles div article a img {
  border-radius: 32px 32px 0 0;
}

/* * Adds a pseudo-element ::before to the anchor tag inside the article, 
  positioning it absolutely relative to the article container. 
  This ensures the link covers the entire card of the post, making the entire area clickable. */
.featured-post-wrapper .entry-title a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  inset: 0;
}

/*  REMOVE SALVATTORE'S SYSTEM
   ========================================================================== */

/* Global Remove Salvattore’s column system and create 4 columns */
/* .nwp-photos-scroll-x .et_pb_blog_grid .et_pb_salvattore_content, */
/* .nwp-photos-scroll-x
  .et_pb_blog_grid
  .et_pb_ajax_pagination_container
  .et_pb_salvattore_content
  .column,
.nwp-blog-scroll-x .et_pb_blog_grid .et_pb_salvattore_content {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
  padding: 0 30px 30px 15px;
  overflow-x: auto;
}
 */
.nwp-photos-scroll-x
  .et_pb_blog_grid
  .et_pb_ajax_pagination_container
  .et_pb_salvattore_content
  .column {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
  padding: 0 30px 30px 15px;
  overflow-x: auto;
}

.nwp-blog-scroll-x .et_pb_blog_grid .et_pb_salvattore_content {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-m);
  padding: 0 30px 30px 15px;
  overflow-x: auto;
}

.nwp-photos-scroll-x .et_pb_blog_grid .et_pb_salvattore_content > .column,
.nwp-blog-scroll-x .et_pb_blog_grid .et_pb_salvattore_content > .column {
  width: 100% !important;
  display: contents !important;
}

.nwp-photos-scroll-x .et_pb_blog_grid .et_pb_post,
.nwp-blog-scroll-x .et_pb_blog_grid .et_pb_post {
  margin: 0 !important;
}

.nwp-photos-scroll-x .et_pb_post {
  min-width: 300px;
}

@media (max-width: 980px) {
  .et_pb_column .et_pb_blog_grid .column.size-1of2 {
    margin: 0 !important;
    width: 100% !important;
    clear: none;
    float: left;
  }
}

@media (min-width: 980px) {
  .nwp-photos-scroll-x
    .et_pb_blog_grid
    .et_pb_ajax_pagination_container
    .et_pb_salvattore_content
    .column {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    padding: 0;
  }

  .et_pb_blog_grid .et_pb_salvattore_content {
    display: grid !important;
    /* grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); */
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-m);
  }

  .nwp-blog-scroll-x .et_pb_blog_grid .et_pb_salvattore_content {
    grid-template-columns: repeat(2, 1fr);
  }

  #nwp-photos-archive div {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--space-m);
  }

  .et_pb_blog_grid .et_pb_salvattore_content > .column {
    width: 100% !important;
    display: contents !important;
  }

  .et_pb_blog_grid .et_pb_post {
    margin: 0 !important;
  }
}

/*  SUB NAVIGATION
   ========================================================================== */
.sub-nav {
  display: flex;
}

.sub-nav .et_pb_button {
  display: grid;
  place-items: center;
  width: 100%;
}

.sub-nav .et_pb_button_module_wrapper {
  height: 100% !important;
}

.sub-nav .et_pb_button_module_wrapper .et_pb_button {
  height: 100% !important;
}

.seven-columns {
  display: flex;
}

.seven-columns div {
  flex: 1;
}

.seven-columns div div {
  width: 100% !important;
}
.seven-columns a {
  width: 100%;
  white-space: nowrap;
}

/* Seven Column Menu Button */
.seven-columns .et_pb_button {
  display: inline-block;
  width: 100%;
  padding: 0.5em 2em !important;
  background-color: white;
  color: var(--clr-dark) !important;
  font-size: 16px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0;
  /* border: 1px solid var(--clr-dark) !important;*/
  border-block-end: 4px solid transparent !important;
  cursor: pointer;
  transition: all linear 0.2s !important;
}

.seven-columns .et_pb_button:hover {
  border-block-end: 4px solid var(--clr-accent) !important;
  transition: all linear 0.2s !important;
}

/* Seven Column Menu Button hover */
.seven-columns .et_pb_button,
.seven-columns .et_pb_button:focus,
.seven-columns .et_pb_button:active {
  display: inline-block;
  padding: 0.5em 2em !important;
  background-color: white !important;
  color: var(--clr-dark) !important;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 !important;
  /*   border: 1px solid var(--clr-dark) !important; */
  cursor: pointer;
  box-shadow: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
  animation: none !important;
  transition-property: none !important;
  transition-duration: 0s !important;
  transition-timing-function: none !important;
  transition-delay: 0s !important;
  will-change: auto !important;
}

/* Seven Column Menu Button data-icon o ::after */
.seven-columns .et_pb_button::after {
  content: none !important;
}

/* Media Query */
@media (max-width: 1024px) {
  .sub-nav,
  .seven-columns {
    overflow-x: auto;
    flex-wrap: nowrap !important;
  }
  .sub-nav .et_pb_button,
  .seven-columns .et_pb_button {
    white-space: nowrap;
  }
}

@media only screen and (max-width: 980px) {
  #nwp-hero-slider .et_pb_image_wrap img {
    width: 1500px;
  }

  .sub-nav-wrapper {
    position: sticky !important;
    top: 124px;
    z-index: 900;
    -webkit-box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, 0.2);
  }
}

/*  MAIN MENU SEARCH ICON
   ========================================================================== */

.et_pb_menu .et_pb_menu__wrap {
  justify-content: space-between;
}

/*  UTILITIES
   ========================================================================== */

/* Card Light & Large Title with Border */
.card-title-border .et_pb_module_header {
  margin-block-end: 10px;
}
.card-title-border .et_pb_module_header::after {
  content: "";
  display: block;
  width: var(--underline-title);
  height: 4px;
  margin-block-start: 20px;
  background-color: var(--clr-accent);
}

/* Underline Title */
.underline .et_pb_text_inner,
.underline .et_pb_heading_container .et_pb_module_heading {
  position: relative;
  padding-block-end: 16px;
}

.underline .et_pb_text_inner::after,
.underline .et_pb_heading_container .et_pb_module_heading::after {
  content: "";
  position: absolute;
  left: 0;
  top: 100%;
  width: var(--underline-title);
  height: 4px;
  background-color: var(--clr-accent);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*  DIVI CHILD GLOBALS
   ========================================================================== */

/*  Global Row Width for Small Screens */
@media (max-width: 768px) {
  .et_pb_row {
    width: var(--global-width-small-screens) !important;
    margin: 0 auto;
  }
}

/* Disable Search Icon */
/* .et_pb_menu__search-button {
  display: none !important;
} */

/* Titles & Texts Color */
.entry-title,
.post-meta,
.wp-block-heading,
.wp-block-latest-posts__list li .wp-block-latest-posts__post-title,
#left-area article,
#left-area article .post-meta {
  color: var(--clr-dark);
}

/* Display:none for Sidebar in Single Pages */
/* #sidebar {
  display: none !important;
} */

#sidebar #block-4,
#sidebar #block-2 {
  display: none !important;
}

/* Fotter Menu in column - Hamburger icon display:none */
.footer-menu .et_pb_menu__menu {
  display: block;
}

.footer-menu .et_mobile_nav_menu {
  display: none;
}

.footer-menu .et_pb_menu__wrap {
  justify-content: unset !important;
}

.footer-menu .et_pb_button {
  display: inline-block;
  padding: 0.8em 2.3em;
  background-color: var(--clr-dark) !important;
}

/* Header Menu - Line Height Dropdown Sub-menu */
#main-header {
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

#main-header .et_pb_row {
  display: flex;
}

@media (max-width: 980px) {
  #main-header .et_pb_row .et_pb_column {
    width: 100%;
    margin-top: 4px;
    margin-bottom: 0px;
  }
}

#menu-main-menu li .sub-menu li {
  line-height: 1.5em !important;
}
#menu-main-menu li li {
  padding-block-end: 7px;
}

/*  BUTTONS
   ========================================================================== */

#photos .et_pb_photos-button {
  display: inline-block;
  padding: 0.8em 2.3em;
  border-radius: 50px;
  font-family: "Trenda Bold";
  font-size: 18px;
  color: white;
  background-color: var(--clr-dark) !important;
}

#photos .et_pb_photos-button:hover {
  display: inline-block;
  padding: 0.8em 2.3em !important;
  background-color: var(--clr-dark) !important;
}

/*  FOOTER MENU SUB-MENU VISIBLE
   ========================================================================== */

#menu-footer-menu .menu-item-has-children .sub-menu {
  position: static !important;
  top: auto !important;
  left: 0 !important;
  display: block !important;
  padding: 0;
  border-top: 0;
  opacity: 1 !important;
  visibility: visible !important;
}

.et_pb_menu .et_pb_menu__menu > nav > ul > li {
  flex-direction: column;
}

#menu-footer-menu .menu-item-has-children .sub-menu li {
  padding: 0;
}

#menu-footer-menu {
  flex-wrap: nowrap;
}

@media (max-width: 1420px) {
  #menu-footer-menu {
    flex-wrap: wrap;
  }
}

#menu-footer-menu > .menu-item {
  flex: 1;
  margin-block-start: 24px;
}

#menu-footer-menu .menu-item-has-children .sub-menu li a {
  font-size: 14px;
  color: #ffffff99 !important;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

#menu-footer-menu .menu-item-has-children > a:first-child:after {
  content: "";
}

/*  TOLL RATES & FEE TABLE SCROLL-X 
   ========================================================================== */

@media (max-width: 1000px) {
  #toll-rates,
  #fee-schedule {
    margin-inline: auto;
    overflow-x: auto;
  }

  #fee-schedule .et_pb_row {
    overflow: visible !important;
  }

  #toll-rates .toll-rates-row-3col,
  #fee-schedule .fee-schedule-row-3col {
    display: flex;
    flex-wrap: nowrap;
    min-width: 350px;
  }

  #toll-rates .toll-rates-row-3col .et_pb_column {
    flex: 0 0 auto;
    width: 25%;
  }
  #fee-schedule .fee-schedule-row-3col .et_pb_column {
    flex: 0 0 auto;
    width: 33.3333%;
  }
}

@media (max-width: 479px) {
  #fee-schedule .fee-schedule-row-1col {
    min-width: calc(91.6% * 3);
    min-width: calc(100% * 3 - 25%);
    margin-inline-start: 4%;
  }
}

/*  TOLL RATES & FEE TABLE SCROLL-X 
   ========================================================================== */

.et_mobile_menu {
  max-height: 80vh;
  overflow-y: auto;
  /* -webkit-overflow-scrolling: touch;*/
}

/*  LOGO SIZE FOR SMALL SCREENS
   ========================================================================== */

@media only screen and (max-width: 1200px) {
  .et_pb_menu__logo-wrap {
    width: 220px !important;
    max-width: 100%;
  }
}

@media only screen and (max-width: 1024px) {
  .et_pb_menu__logo-wrap {
    width: 180px !important;
    max-width: 100%;
  }
}

@media only screen and (max-width: 975px) {
  .et_pb_menu__logo-wrap {
    width: 250px !important;
    max-width: 100%;
  }
}