/*
Theme Name: My Theme Name
Theme URI: https://mydomainname/
Description: The theme for LFMTE traffic exchanges.
Version: 1.0
Author: Josh Abbott.
Design Modifications by Jason Larremore @ trafficreations.com.
*/

@charset "utf-8";
/* Fonts (safe to import here) */
@import url('https://fonts.googleapis.com/css2?family=Luckiest+Guy&family=Orbitron:wght@600;700&display=swap');

/* =========================
   ORIGINAL STRUCTURE (UNTOUCHED)
   ========================= */

/* Main font settings */
body {
  font-size: 16px;
  font-weight: 400;
  color: #212529;
  background-color: #F3EFF3;
}

/* Main styles for the top level of the main menu */
.lfm_menu_bar {
  padding: 0 0 45px;
  margin-bottom: 20px; /*
  /* If your menu bar is overlapping the page content, increase the margin here */
}

@media (max-width: 991.98px) {
  /* Mobile view settings for the top level navigation */
  .lfm_menu_bar {
    padding-bottom: 0;
    margin-bottom: 20px;
  }
}

/* Site logo styles */
.lfm_menu_logo {
  max-height: 55px;
}
@media (min-width: 992px) {
  .lfm_menu_logo { margin-right: 20px; }
}

/* Desktop View Settings */
@media (min-width: 992px) {
  body {
    margin: 0;
    background: #D0361A;
background: -moz-linear-gradient(top, #D0361A 0%, #B6FF00 50%, #00ff33 100%);
background: -webkit-linear-gradient(top, #D0361A 0%, #B6FF00 50%, #00ff33 100%);
background: linear-gradient(to bottom, #D0361A 0%, #B6FF00 50%, #00ff33 100%);
} /* Sets the main background color */
    background-image: url(/themes/i/images/header_bg.jpg); /* Sets the header background image */
    background-repeat: repeat-x;
  }

  #headerwrapper {
    /* Set the header image sizes here and inside #header */
    width: 1500px;
    height: 300px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
    background-color: transparent;
  }

  #header {
    background-image: url(/themes/i/images/header_template.gif); /* Sets the header image */
    background-repeat: no-repeat;
    background-color: transparent;
    width: 1500px;
    height: 300px;
  }
}

/* Mobile View Settings */
@media (max-width: 992px) {
  body {
    margin: 0;
    background-color: #F3EFF3; /* Sets the main background color */
    background-image: url(/themes/i/images/mobile_header_bg.jpg); /* Sets the mobile header background image */
    background-repeat: repeat-x;
  }

  #headerwrapper {
    /* Set the header image sizes here and inside #header */
    width: 300px;
    height: 75px;
    margin-right: auto;
    margin-left: auto;
    clear: both;
    background-color:transparent;
  }

  #header {
    background-image: url(/themes/i/images/mobile_header.png); /* Sets the mobile header image */
    background-repeat: no-repeat;
    width: 300px;
    height: 75px;
    background-color: transparent;
  }
}

.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
  /* Sets the navigation tabs for the top level */
  font-size: 17px;
  color: #D65051;
  font-weight: 700;
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link {
  /* Changes the colors when a tab is opened */
  background: rgb(253,145,79);
  color: #FFFFFF;
  font-weight: 700;
  border: 1px solid #DDDDDD;
}

.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
  /* Hover style when a tab is not opened */
  background-color: #D65051;
  color:white;
}

.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:hover {
  /* Hover style when a tab is opened */
  background-color: #D65051;
  color:#fff;
}

@media (min-width: 992px) {
  /* Desktop view settings for the top level navigation tabs */
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
    margin: 0px 3px;
    padding: 6px 15px;
    border: 1px solid rgba(255,255,255,0);
    border-radius: 5px;
    position: relative;
  }

  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link,
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
    border: 1px solid #D65051;
  }

  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
    /* Fills in the gap between an opened tab and the bottom of the bar */
    content: "";
    background-color: transparent;
    width: calc(100% + 2px);
    height: 14px;
    position: absolute;
    bottom: -10px;
    left: -1px;
    border: 0px solid #DDDDDD;
    border-top: none;
  }
}

@media (max-width: 991.98px) {
  /* Mobile view settings for the top level navigation tabs */
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
    padding: 8px 15px;
    text-align: left;
  }

  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link {
    /* Returns to the original colors when a tab is closed in mobile */
    color: #FFFFFF;
    background-color: #007bff;
  }

  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:hover {
    /* Returns to the original hover effect when closed in mobile  */
    color: #FFFFFF;
    background-color: #089cff;
  }

  /* Adds an arrow in mobile view */
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link:after {
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    color: #FFFFFF;
    transform: rotate(-90deg);
    position: absolute;
    right: 1.25rem;
    transition: all 0.1s ease-out;
  }
  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link:after {
    color: #7a3e18;
    transform: rotate(0deg);
  }
  .lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_closed > .nav-link:after {
    color: #FFFFFF;
    transform: rotate(-90deg);
  }
}

/* Main styles for the second level of the main menu */
.lfm_menu_tab {
  background: linear-gradient(180deg, #00cc33, #006600);
  position: absolute;
  display: none;
  left: 0;
  top: 100%;
  z-index: 999;
  width: 100%;
  font-weight: 700;
  border: 9px inset #d0361a;
}

li.lfm_tab_opened .lfm_menu_tab { display: flex; }

@media (max-width: 991.98px) {
  /* Mobile view settings for the second level navigation */
  .lfm_menu_tab {
    background-color: #EEEEEE;
    position: relative;
    flex-direction: column;
    top: 0;
    padding: 5px 0;
  }
  li.lfm_tab_closed .lfm_menu_tab { display: none; }
}

.lfm_menu_tab > li > a {
  /* Sets the navigation links for the second level */
  font-size: 17px;
  padding: 0 20px;
  line-height: 45px;
  color: #444444;
  text-decoration: none;
  display: block;
}
.lfm_menu_tab > li > a:hover {
  background: rgb(253,145,79);
  color: #fff;
}

.lfm_menu_tab .dropdown-menu a {
  /* Sets the navigation links for the third level */
  font-size: 15px;
  padding: 0 20px;
  line-height: 32px;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  display: block;
  background-color: rgb(253,145,79);
}
.lfm_menu_tab .dropdown-menu a:hover {
  background-color: #D65051;
  color: #ffffff;
  text-decoration: none;
}

@media (max-width: 991.98px) {
  /* Mobile view settings for the second level navigation links */
  .lfm_menu_tab > li > a {
    padding-left: 40px;
    line-height: 36px;
    width: 100%;
  }

  /* Mobile view settings for the third level navigation links */
  .lfm_menu_tab .dropdown-menu a { padding-left: 50px; }
}

/* Styles for the footer */
.lfm_footer { background: rgb(253,145,79); }

/* Icon settings */
.far, .fas { margin-right:3px; }
.feedicon { color:#3097D1; font-size:20px; margin-right:5px; }

/* Profile picture sizes */
.profilepic_small { width:40px; height:40px; }
.profilepic_med   { width:75px; height:75px; }
.profilepic_large { width:200px; height:200px; }

/* Various styles */
.buttonlink {
  /* This class defines <a> tag links that look like buttons */
  cursor: pointer;
  background-color:#1468e5;
  border-radius:2px;
  border:1px solid #FF0000;
  display:inline-block;
  color:#FFFFFF;
  font-family:arial;
  font-size:18px;
  font-weight:500;
  padding:4px 7px;
  margin:2px 1px 2px 1px;
  text-decoration:none;
}
.buttonlink:hover {
  /* This controls the button links when you hover over them */
  color:#FFFFFF;
  background-color:#3385FF;
  text-decoration:none;
}

.infobar {
  /* This class defines sections that span the entire page width */
  width:100%;
  padding-top: 15px;
  padding-bottom: 15px;
  color:#FFFFFF;
  background-color:#555555;
}
.infobar h2 { color:#FFFFFF; }

.vcenter {
  /* This is a class that can be used in Bootstrap rows to vertically center the content */
  display: flex;
  align-items: center;
}

/* The next 3 sections control various text styles used throughout the LFM Members Area */
.lfm_title      { font-family: "Arial"; color:#333333; font-size:32px; }
.lfm_descr      { font-family: "Arial"; color:#111111; font-size:16px; }
.lfm_descr_bold { font-family: "Arial"; color:#000000; font-size:16px; font-weight:700; }

/* =========================
   FROGGY THEME (NON-DESTRUCTIVE OVERRIDES)
   ========================= */

:root{
  --frog-green:#2eea70;
  --frog-green-2:#16c75a;
  --frog-green-3:#0f9a45;
  --frog-orange:#ff7a1a;
  --frog-ink:#eafff1;
  --frog-shadow:rgba(46,234,112,.35);
  --frog-shadow-2:rgba(255,122,26,.28);
}

/* Use Orbitron globally without changing layout */
body { font-family:'Orbitron', sans-serif; 
font-weight: 400; }

/* Top nav links – colors only, same spacing/structure */
.lfm_menu_bar .navbar-nav > .nav-item > .nav-link {
  color: var(--frog-ink);
  border-radius: 8px;
}
.lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover {
  background: linear-gradient(180deg, var(--frog-green), var(--frog-green-2));
  color:#041207;
  border-color: var(--frog-green-3);
  box-shadow: 0 0 12px var(--frog-shadow);
}
.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link {
  background: linear-gradient(180deg, var(--frog-green-2), var(--frog-green-3));
  color:#041207;
  border-color: var(--frog-green-3);
  box-shadow: inset 0 0 8px var(--frog-shadow);
}

/* Second level bar – keep 10px border, just recolor */
.lfm_menu_tab {
  background: linear-gradient(180deg, #0e2216, #0a1a12);
  border-color: var(--frog-green);
  box-shadow: inset 0 0 12px var(--frog-shadow);
}
.lfm_menu_tab > li > a       { color: #d9ffe9; }
.lfm_menu_tab > li > a:hover { background: rgba(46,234,112,.12); color:#eafff1; }
.lfm_menu_tab .dropdown-menu a {
  background: linear-gradient(180deg, var(--frog-green), var(--frog-green-2));
  color:#041207;
}
.lfm_menu_tab .dropdown-menu a:hover {
  background: linear-gradient(180deg, var(--frog-orange), #ff9447);
  color:#041207;
}
/* === Froggy Hop for Nav Tabs (non-structural) === */

/* gentle glow pulse when a tab is opened */
@keyframes frogGlow {
  0%,100% { box-shadow: 0 0 8px rgba(46,234,112,.35); }
  50%     { box-shadow: 0 0 16px rgba(46,234,112,.55); }
}

/* quick hop on hover/focus */
@keyframes frogHop {
  0%   { transform: translateY(0); }
  30%  { transform: translateY(-6px); }
  55%  { transform: translateY(0); }
  75%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

/* prep the links for transform without changing layout */
.lfm_menu_bar .navbar-nav > .nav-item > .nav-link{
  will-change: transform, box-shadow;
  transition: transform .12s ease, box-shadow .15s ease;
  transform-origin: 50% 100%; /* hop from the baseline */
}

/* hop when hovered/focused (desktop) */
@media (min-width: 992px){
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link:hover,
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link:focus{
    animation: frogHop .5s ease-out;
    /* optional: tiny glow while hopping (keeps your current colors) */
    box-shadow: 0 0 12px rgba(46,234,112,.35);
  }
}

/* subtle breathing glow for the active/opened tab (no movement) */
.lfm_menu_bar .navbar-nav > .nav-item.lfm_tab_opened > .nav-link{
  animation: frogGlow 1.6s ease-in-out infinite;
}

/* Optional: super-subtle idle bob on all tabs (comment out if you don't want idle motion) */
@keyframes frogBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-1.5px); }
}
@media (min-width: 992px){
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link{
    animation: frogBob 4s ease-in-out infinite;
  }
  /* small stagger so they don't bob in sync */
  .lfm_menu_bar .navbar-nav > .nav-item:nth-child(2) > .nav-link{ animation-delay: .2s; }
  .lfm_menu_bar .navbar-nav > .nav-item:nth-child(3) > .nav-link{ animation-delay: .4s; }
  .lfm_menu_bar .navbar-nav > .nav-item:nth-child(4) > .nav-link{ animation-delay: .6s; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .lfm_menu_bar .navbar-nav > .nav-item > .nav-link{
    animation: none !important;
    transition: none !important;
  }
}
/* === Froggy Hop for 2nd & 3rd level tabs (non-structural) === */

/* Reuse existing keyframes if you already added frogHop/frogGlow/frogBob.
   If not, keep these. */
@keyframes frogHop {
  0%{transform:translateY(0)} 30%{transform:translateY(-6px)}
  55%{transform:translateY(0)} 75%{transform:translateY(-3px)}
  100%{transform:translateY(0)}
}
@keyframes frogGlow {
  0%,100%{ box-shadow:0 0 8px rgba(46,234,112,.35) }
  50%    { box-shadow:0 0 16px rgba(46,234,112,.55) }
}
@keyframes frogBob {
  0%,100%{ transform:translateY(0) }
  50%    { transform:translateY(-1.5px) }
}

/* Prep the links (keeps layout intact) */
.lfm_menu_tab > li > a,
.lfm_menu_tab .dropdown-menu a{
  will-change: transform, box-shadow;
  transition: transform .12s ease, box-shadow .15s ease;
  transform-origin: 50% 100%;
}

/* Hover/focus hop on desktop */
@media (min-width: 992px){
  .lfm_menu_tab > li > a:hover,
  .lfm_menu_tab > li > a:focus{
    animation: frogHop .5s ease-out;
    box-shadow: 0 0 12px rgba(46,234,112,.35);
  }
  .lfm_menu_tab .dropdown-menu a:hover,
  .lfm_menu_tab .dropdown-menu a:focus{
    animation: frogHop .45s ease-out;
    box-shadow: 0 0 10px rgba(46,234,112,.3);
  }
}

/* Optional: subtle idle bob (comment out if you don't want idle motion) */
@media (min-width: 992px){
  .lfm_menu_tab > li > a{ animation: frogBob 4s ease-in-out infinite; }
  .lfm_menu_tab > li:nth-child(2) > a{ animation-delay:.15s; }
  .lfm_menu_tab > li:nth-child(3) > a{ animation-delay:.3s; }
  .lfm_menu_tab > li:nth-child(4) > a{ animation-delay:.45s; }

  .lfm_menu_tab .dropdown-menu a{ animation: frogBob 5s ease-in-out infinite; }
}

/* If you mark an item "open/active" via a class, give it a breathing glow */
.lfm_menu_tab > li.active > a,
.lfm_menu_tab .dropdown-menu a.active{
  animation: frogGlow 1.6s ease-in-out infinite;
}

/* Mobile: disable motion (no hover on touch anyway) */
@media (max-width: 991.98px){
  .lfm_menu_tab > li > a,
  .lfm_menu_tab .dropdown-menu a{ animation: none !important; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .lfm_menu_tab > li > a,
  .lfm_menu_tab .dropdown-menu a{
    animation: none !important;
    transition: none !important;
  }
}

/* Footer color only */
.lfm_footer {
  background: linear-gradient(180deg, #0a2014, #07170f);
  color: var(--frog-ink);
  border-top: 1px solid #0f2f1c;
}

/* Legacy button style, themed (keeps same sizing) */
.buttonlink{
  background: linear-gradient(180deg, var(--frog-green), var(--frog-green-2));
  border-color: var(--frog-green-3);
  color:#041207;
  box-shadow: 0 0 10px var(--frog-shadow);
  font-family:'Orbitron', sans-serif;
}
.buttonlink:hover{
  background: linear-gradient(180deg, var(--frog-orange), #ff9447);
  color:#041207;
}

/* =========================
   SMALL COMPONENTS (OPT-IN)
   ========================= */

/* Hoppy Owner footer badge (use in footer HTML) */
.hoppy-owner{
  display:inline-flex; align-items:center; gap:10px; padding:10px 14px;
  border-radius:12px; background:#1a1a1a; border:2px solid var(--frog-green-2);
  box-shadow:0 0 12px var(--frog-shadow), 0 0 6px #33ff99;
  font-size:14px; color:#fff;
}
.hoppy-owner img{
  width:40px; height:40px; border-radius:50%;
  border:2px solid var(--frog-green); box-shadow:0 0 8px var(--frog-green);
}
.hoppy-owner .title{ font-weight:700; color:var(--frog-green); }
.hoppy-owner .name{ font-size:13px; }

/* Optional Froggy panels (do not affect existing layout) */
.froggy-time{
  max-width:1100px; margin:18px auto 26px; padding:10px 16px; text-align:center;
  font-size:2rem; color:var(--frog-ink);
  background:linear-gradient(90deg,#0f2317,#0b1b12 45%,#0f2317);
  border:3px solid #103a22; border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.35), 0 0 14px var(--frog-shadow) inset;
}
.froggy-container{ max-width:1000px; margin:24px auto 10px; display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.froggy-panel{
  flex:1 1 460px; background:linear-gradient(145deg,#0a2014,#07170f);
  border-radius:14px; padding:18px 18px 22px; font-size:1.05rem;
  box-shadow:0 10px 24px rgba(0,0,0,.45); transition:transform .2s ease, box-shadow .2s ease;
}
.froggy-panel:hover{ transform:translateY(-3px) }
.textad-panel{
  border:2px dashed var(--frog-green-3);
  box-shadow:0 0 0 1px var(--frog-green-3) inset, 0 0 18px var(--frog-shadow);
}
.bannerad-panel{
  border:2px dashed #a44a12;
  box-shadow:0 0 0 1px #a44a12 inset, 0 0 18px var(--frog-shadow-2);
}
.froggy-panel h2{
  font-family:'Luckiest Guy',cursive; margin:0 0 8px; color:var(--frog-ink);
  text-shadow:0 0 8px rgba(46,234,112,.25),0 0 12px rgba(255,122,26,.18);
}