/*
========================================================
UTAH FORGE CUSTOM CSS
========================================================
*/

/* -----------------------------------------------------
=TABLE OF CONTENTS
---------------------------------------------------------
1. VARIABLES
2. GLOBAL RESETS & TYPOGRAPHY
3. LAYOUT (Sections, Rows, Columns)
4. HEADER & NAVIGATION
5. HERO / BANNERS
6. HOME PAGE
7. INNER PAGES
   7.1 Blog & News
   7.2 Events (The Events Calendar)
8. MODULES & ELEMENTS
   8.1 Buttons & Links
   8.2 Menus (Red Vertical Menu)
   8.3 Accordions & Tabs
   8.4 Forms
   8.5 Pagination (WP-PageNavi)
   8.6 Utilities / Helpers
   8.7 Social Icons (Font Awesome swaps)
9. FOOTER
10. MEDIA QUERIES
------------------------------------------------------ */


/* 1. VARIABLES */
:root {
  /* Website Colors */
  --forge-red:   #ED1C24;
  --forge-orange:#F16122;
  --forge-blue:  #07BFE8;

  --gray-900: #282828;
  --white:    #ffffff;
}


/* 2. GLOBAL RESETS & TYPOGRAPHY */
/* (add global resets/typography here as needed) */


/* 3. LAYOUT (Sections, Rows, Columns) */
/* make Divi blog grid equal height helpers */
.pa-blog-equal-height .pa-auto-height { height: auto !important; }
.pa-blog-equal-height .pa-auto-margin { margin-top: 20px !important; }


/* 4. HEADER & NAVIGATION */
/* Divi mobile menu parent links */
.et_mobile_menu li a { text-decoration: none; }

/* Edit the Divi submenu list items */
.et_pb_menu li li a { text-decoration: none; }


/* 5. HERO / BANNERS */
/* (none provided yet) */


/* 6. HOME PAGE */
/* (page-specific rules can go here if needed) */


/* 7. INNER PAGES */
/* 7.1 Blog & News */
/* news widget link styles */
.news-widget a:link,
.news-widget a:visited {
  color: var(--forge-red) !important;
  text-decoration: none;
  font-weight: bolder;
  transition: all .25s ease;
}
.news-widget a:hover,
.news-widget a:active {
  color: var(--forge-blue) !important;
  text-decoration: underline;
}

/* Put space between pagination “Next Entries” */
.alignright { padding-left: 20px; }

/* remove underline from post slide title links */
.et_pb_slide_title a:link,
.et_pb_slide_title a:visited,
.et_pb_slide_title a:hover,
.et_pb_slide_title a:active {
  text-decoration: none;
}

/* Make image caption container smaller when floating images next to text in blog posts */
.img-cap-fix-320 .pac_dih__image_details { max-width: 320px; }

/* 7.2 Events (The Events Calendar) */
/* Events archive/month/day container padding */
.tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container { padding-top: 200px; }
.tribe-events .tribe-events-l-container { padding-top: 130px; }

/* Single event pages */
#tribe-events-pg-template { padding-top: 200px; }

/* additional events css */
.tribe-events-back a,
.tribe-events-back a:visited {
  color: var(--forge-red);
  transition: all 0.3s ease-in-out;
}
.tribe-events-back a:hover { text-decoration: underline; }


/* 8. MODULES & ELEMENTS */
/* 8.1 Buttons & Links - Divi Post Navigation buttons */
.et_pb_posts_nav .nav-previous a,
.et_pb_posts_nav .nav-next a {
  color: var(--white);
  background: var(--gray-900);
  border: 2px solid var(--gray-900);
  padding: .7em 1.3em;
  border-radius: 3px;
  transition: all 0.3s ease-in-out;
}
.et_pb_posts_nav .nav-previous a:hover,
.et_pb_posts_nav .nav-next a:hover {
  color: var(--gray-900);
  background: transparent;
  border: 2px solid var(--gray-900);
  transition: all 0.3s ease-in-out;
}

/* 8.2 Menus (Red Vertical Menu) */
/****** RED VERTICAL MENU START ******/
.red-vertical-menu .et-menu > li { padding-left: 0; padding-right: 0; } /* remove default 11px side padding */
.red-vertical-menu .et_pb_menu__menu nav ul li { display: block; width: 100%; margin: 0; } /* full-width items */

.red-vertical-menu .et_pb_menu__menu nav ul li a {
  padding: 20px !important;
  background: #f4f4f4;
  border-radius: 0;
  border-bottom: .5px solid var(--forge-red);
}

.red-vertical-menu .et_pb_menu__menu nav ul li a:hover {
  opacity: 1 !important;
  color: var(--white);
  background: var(--forge-red);
  border-color: var(--forge-red);
}

.red-vertical-menu .et_pb_menu__menu nav ul li.current-menu-item a {
  opacity: 1 !important;
  color: var(--white);
  background: var(--forge-red);
  border-color: var(--forge-red);
}

/* position submenu to the right of parent */
.red-vertical-menu .et_pb_menu__menu nav ul li ul { top: 0 !important; }
.red-vertical-menu .et_pb_menu__menu nav li ul { left: 100% !important; }

/* icon motion/color on hover/active */
.red-vertical-menu ul li a:hover:before {
  margin-left: 7px;
  color: var(--white) !important;
  transition: all .75s ease;
}
.red-vertical-menu ul li.current-menu-item a:before {
  margin-left: 7px;
  color: var(--white) !important;
}
/****** RED VERTICAL MENU END ******/

/* 8.3 Accordions & Tabs */
/* add icon to the opened accordion */
.add-accordion-icon .et_pb_accordion_item.et_pb_toggle_open .et_pb_toggle_title:before {
  display: block;
  content: "e04f";
}

/* 8.4 Forms */
/* (no direct form rules provided here) */

/* 8.5 Pagination (WP-PageNavi) */
.wp-pagenavi a,
.wp-pagenavi span {
  color: var(--gray-900);
  background: rgba(0,0,0,0);
  font-size: 1em !important;
  line-height: 1em;
  font-weight: bold !important;
  padding: 0.45em 0.8em !important;
  border-radius: 3px;
  border: none;
  transition: all .5s;
}

.wp-pagenavi span.current {
  color: var(--white) !important;
  background: var(--gray-900) !important;
  border-radius: 3px;
}

.wp-pagenavi a:hover {
  color: var(--white) !important;
  background: var(--gray-900) !important;
}

.wp-pagenavi .pages { background: none; }
.wp-pagenavi { border-top: none; text-align: center; }

/* 8.6 Utilities / Helpers */
.no-bm { margin-bottom: 0; } /* remove margin from bottom of paragraphs */

/* 8.7 Social Icons (Font Awesome swaps) */
/* replace myspace icon with Threads */
.et-social-myspace a.icon:before {
  content: "\e618";
  font-family: "Font Awesome 5 Brands" !important;
}
/* replace flikr icon with Bluesky */
.et-social-flikr a.icon:before {
  content: "\e671";
  font-family: "Font Awesome 5 Brands" !important;
}


/* 9. FOOTER */
/* (add footer-specific rules here) */


/* 10. MEDIA QUERIES
   Keep breakpoint-specific overrides grouped here for clarity.
------------------------------------------------------ */

/* ≥1080px: Put image at the left of blog module on desktop */
@media only screen and (min-width: 1080px) {
  .uf-blog .et_pb_post.has-post-thumbnail .entry-featured-image-url {
    float: left;
    width: 40%;
    margin-right: 4%;
  }
  .uf-blog .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
    padding-left: 44%;
  }
}

/* Mega menu blog layout (no breakpoint) */
.uf-blog2 .et_pb_post.has-post-thumbnail .entry-featured-image-url {
  float: left;
  width: 20%;
  margin-right: 2%;
}
.uf-blog2 .et_pb_post.has-post-thumbnail:not(.format-gallery) > .post-content {
  padding-left: 22%;
}

/* ≤980px: mobile/tablet tweaks */
@media all and (max-width: 980px) {

  /*** wrap row in a flex box ***/
  .custom_row {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    flex-wrap: wrap;
  }

  /*** mobile column ordering ***/
  .first-on-mobile  { -webkit-order: 1; order: 1; }
  .second-on-mobile { -webkit-order: 2; order: 2; }
  .third-on-mobile  { -webkit-order: 3; order: 3; }
  .fourth-on-mobile { -webkit-order: 4; order: 4; }

  /*** add margin to last column ***/
  .custom_row:last-child .et_pb_column:last-child { margin-bottom: 30px; }

  /* Red Vertical Menu: show full menu on mobile and hide hamburger */
  .et-db #et-boc .et-l .red-vertical-menu .et_pb_menu__menu { display: flex; }
  .et-db #et-boc .et-l .red-vertical-menu .et_mobile_nav_menu { display: none; }

  /* Single event pages: reduce top padding on mobile */
  #tribe-events-pg-template { padding-top: 130px; }
}