/*--------------------------------------------------------------
This is your custom stylesheet.

Add your own styles here to make theme updates easier.
To override any styles from other stylesheets, simply copy them into here and edit away.

Make sure to respect the media queries! Otherwise you may
accidentally add desktop styles to the mobile layout.
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

[your-theme]/assets/css/custom.css
--------------------------------------------------------------*/

/* =======================================
   HFN Place Events – Card grid (4 per row)
   ======================================= */

/* Wrapper + heading */
.hfn-place-events {
  margin-top: 1.5rem;
}

.hfn-place-events-heading {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 1.25rem;
}

/* Grid container */
.hfn-place-events .hfn-place-events-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

/* Individual card */
.hfn-place-events .hfn-place-event-card {
  margin: 0;
  padding: 0;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.08);
  border: 1px solid rgba(148, 163, 184, 0.15);
  overflow: hidden;
  display: flex;
  height: 100%;
}

.hfn-place-events .hfn-place-event-card-inner {
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  width: 100%;
}

/* Content area */
.hfn-place-events .hfn-place-event-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

/* Date / time row */
.hfn-place-events .hfn-place-event-date-badge {
  font-size: 0.85rem;
  color: #555;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.hfn-place-events .hfn-place-event-date::before {
  content: "📅 ";
}

/* Title */
.hfn-place-events .hfn-place-event-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

.hfn-place-events .hfn-place-event-title a {
  color: #0073aa;
  text-decoration: none;
}

.hfn-place-events .hfn-place-event-title a:hover,
.hfn-place-events .hfn-place-event-title a:focus {
  text-decoration: underline;
}

/* ✅ Image under title */
.hfn-place-events .hfn-place-event-thumb {
  margin-top: 4px;
}

.hfn-place-events .hfn-place-event-thumb a {
  display: block;
}

.hfn-place-events .hfn-place-event-thumb-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  object-fit: cover;
}

/* Cost chip (optional) */
.hfn-place-events .hfn-place-event-cost {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: #444;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 2px 8px;
}

/* Excerpt */
.hfn-place-events .hfn-place-event-excerpt {
  font-size: 0.9rem;
  color: #555;
}

/* Footer link pinned toward bottom of card */
.hfn-place-events .hfn-place-event-footer {
  margin-top: auto;
}

.hfn-place-events .hfn-place-event-button {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  border: none;
  background: #0073aa;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
}

.hfn-place-events .hfn-place-event-button:hover,
.hfn-place-events .hfn-place-event-button:focus {
  background: #005f8a;
}

/* "No events" message */
.hfn-place-events .hfn-place-events-empty {
  font-size: 0.95rem;
  color: #666;
  padding: 12px 0;
}

/* =========================
   Responsive grid behavior
   ========================= */

/* Medium screens: 2 cards per row */
@media (max-width: 1024px) {
  .hfn-place-events .hfn-place-events-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Small screens: 1 card per row */
@media (max-width: 640px) {
  .hfn-place-events .hfn-place-events-grid {
    grid-template-columns: 1fr;
  }

  .hfn-place-events .hfn-place-event-card-inner {
    padding: 14px 14px 16px;
  }
}

/* ============================
   HFN Place Events – fine tuning
   ============================ */

/* 1) Make the image larger (taller) */
.hfn-place-events .hfn-place-event-thumb {
  margin-top: 6px;
  margin-bottom: 4px;          /* 2) tighten gap above description */
}

.hfn-place-events .hfn-place-event-thumb-image {
  display: block;
  width: 100% !important;
  height: 160px;               /* increase this to make it even taller */
  object-fit: cover;
  border-radius: 10px;
}

/* 2 & 3) Tighten whitespace around excerpt */
.hfn-place-events .hfn-place-event-excerpt {
  font-size: 0.9rem;
  color: #555;
  margin-top: 4px;             /* less space above */
  margin-bottom: 4px;          /* less space before "View event" */
}

/* 3) Bring footer closer (remove push-to-bottom behavior) */
.hfn-place-events .hfn-place-event-footer {
  margin-top: 4px;             /* instead of margin-top: auto; */
}

/* 4) Make "View event" a simple text link */
.hfn-place-events .hfn-place-event-button {
  display: inline;             /* no pill */
  padding: 0;
  margin: 0;
  border: none;
  background: none;
  color: #0073aa;
  font-size: 0.9rem;           /* similar to description */
  font-weight: 500;
  text-decoration: none;
}

.hfn-place-events .hfn-place-event-button:hover,
.hfn-place-events .hfn-place-event-button:focus {
  text-decoration: underline;
}

/* =======================================
   HFN Place Events – Larger natural images
   ======================================= */

/* Image wrapper spacing */
.hfn-place-events .hfn-place-event-thumb {
  margin-top: 6px;
  margin-bottom: 6px; /* tighten up space above description */
}

/* Make the image MUCH larger, natural aspect ratio */
.hfn-place-events .hfn-place-event-thumb-image {
  width: 100% !important;    /* take full card width */
  height: auto !important;   /* natural aspect ratio */
  border-radius: 10px;
  display: block;
  max-width: 100%;           /* prevents overflow */
  object-fit: contain;        /* ensures NO cropping */
}

/* Tighten spacing above & below excerpt */
.hfn-place-events .hfn-place-event-excerpt {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Footer spacing (no big gaps) */
.hfn-place-events .hfn-place-event-footer {
  margin-top: 4px !important;
}

/* Make "View event" a simple text link (not a button) */
.hfn-place-events .hfn-place-event-button {
  display: inline;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: #0073aa;
  text-decoration: none;
  font-weight: 500;
}

.hfn-place-events .hfn-place-event-button:hover {
  text-decoration: underline;
}


/* =======================================
   HFN Place Events – make card images BIG
   ======================================= */

/* Make the thumbnail wrapper take full card width */
.hfn-place-events .hfn-place-event-thumb {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;     /* cancel any fixed-width flex basis */
  margin-top: 8px;
  margin-bottom: 6px;            /* tight space above description */
}

.hfn-place-events .hfn-place-event-thumb a {
  display: block;
}

/* Image: full width, natural aspect ratio, no cropping */
.hfn-place-events .hfn-place-event-thumb-image {
  display: block;
  width: 100% !important;        /* stretch to full wrapper width */
  max-width: none !important;    /* remove any 90px etc limits */
  height: auto !important;       /* keep aspect ratio */
  object-fit: contain;           /* just in case – no cropping */
  border-radius: 12px;
}

/* Tighten spacing around the text below the image */
.hfn-place-events .hfn-place-event-excerpt {
  margin-top: 4px;
  margin-bottom: 4px;
}

/* Keep "View event" as a small text link right under excerpt */
.hfn-place-events .hfn-place-event-footer {
  margin-top: 4px !important;
}

.hfn-place-events .hfn-place-event-button {
  display: inline;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: #0073aa;
  text-decoration: none;
  font-weight: 500;
}

.hfn-place-events .hfn-place-event-button:hover,
.hfn-place-events .hfn-place-event-button:focus {
  text-decoration: underline;
}

/* =================END OF PLACES EVENT TAB CUSTOM CSS===================== */


/* === Event Categories Grid ====================== */

.hf-event-cats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem; /* space between cards */
  margin-top: 1.5rem;
}

@media (max-width: 960px) {
  .hf-event-cats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hf-event-cats-grid {
    grid-template-columns: 1fr;
  }
}

/* Allow columns override via shortcode (hf-cols-2 / hf-cols-4 etc.) */
.hf-event-cats-grid.hf-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.hf-event-cats-grid.hf-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Card styling – BuddyBoss-ish, like your Places Categories */
.hf-event-cat-card {
  display: block;
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,0.4); /* slate-ish */
  padding: 0.9rem 1.25rem;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(15,23,42,0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease,
              border-color 0.12s ease, background-color 0.12s ease;
}

.hf-event-cat-card-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.hf-event-cat-title {
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #111827; /* dark text */
}

.hf-event-cat-count {
  font-weight: 600;
  font-size: 0.9rem;
  opacity: 0.7;
}

/* Hover/focus states */
.hf-event-cat-card:hover,
.hf-event-cat-card:focus-visible {
  border-color: #fb7185; /* pink-ish accent to match your brand */
  box-shadow: 0 16px 40px rgba(248,113,113,0.18);
  transform: translateY(-1px);
  background: #fff7f8;
}

/* Optional: make the count look like a pill */
.hf-event-cat-count {
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.5);
}

/* === END Event Categories Grid ====================== */

.hfn-event-tax{
  margin-top: .35rem;
  font-size: 0.9rem;
  line-height: 1.25rem;
  opacity: .95;
}

.hfn-event-tax-row{
  margin-top: .15rem;
}

.hfn-event-tax-label{
  font-weight: 600;
  margin-right: .35rem;
}

.hfn-event-tax-terms a{
  text-decoration: underline;
}

.hfn-share-event-wrap { margin-top: 8px; }
.hfn-share-event-btn { padding: 6px 10px; border-radius: 8px; }
.hfn-share-event-status { margin-top: 6px; font-size: 13px; }

.tribe-events-meta-group .hfn-share-event-wrap { margin-top: 12px; }


/* Fix excessive whitespace in Place Live Stream tab */
.geodir-tabs-content,
.geodir-tab-content,
.tab-content,
.tab-pane {
    min-height: 0 !important;
}

/* Target the active tab only */
.tab-pane.active {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* Tighten Live Stream output specifically */
.hfdn-livestream {
    margin-top: 0;
}

/* Optional: remove extra space below embed */
.hfdn-livestream__wrap {
    margin-bottom: 0;
}

.tab-pane.active {
    height: auto !important;
}

/* If JS injects inline height/min-height, force it back to auto */
.tab-content[style],
.tab-pane[style],
.geodir-tabs-content[style],
.geodir-tab-content[style],
.geodir-tabs-content-wrapper[style] {
  height: auto !important;
  min-height: 0 !important;
}

/* Also force the active pane to not be positioned/offset weirdly */
.tab-pane.active {
  top: auto !important;
  bottom: auto !important;
}

/* Fix DOUBLE responsive wrappers (your wrap + FitVids wrap) */
.hfdn-livestream__wrap {
  padding-top: 0 !important;
  height: auto !important;
}

/* Let FitVids be the only aspect-ratio wrapper */
.hfdn-livestream__wrap .fluid-width-video-wrapper {
  margin: 0 !important;
}

      .hfdn-fp-badge{
        text-decoration:none;
        color:inherit;
        cursor:pointer;
      }
      .hfdn-fp-badge:hover{
        background:rgba(0,0,0,.12);
      }

/* Hide the BuddyBoss vertical profile nav on all member pages */
body.bp-user #object-nav.bb-single-main-nav--vertical,
body.bp-user #object-nav.bb-single-main-nav--vertical.users-nav {
  display: none !important;
}

/* Wrapper */
body.bp-user .hfdn-profile-nav-dropdown {
    margin: 20px 0 24px;
    position: relative;
    max-width: 420px;
}

/* Styled select */
body.bp-user .hfdn-profile-nav-dropdown select {
    width: 100%;
    padding: 14px 48px 14px 18px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,.15);
    font-size: 16px;
    font-weight: 500;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Hover */
body.bp-user .hfdn-profile-nav-dropdown select:hover {
    border-color: #ff4f8b;
}

/* Focus */
body.bp-user .hfdn-profile-nav-dropdown select:focus {
    outline: none;
    border-color: #ff4f8b;
    box-shadow: 0 0 0 3px rgba(255,79,139,.15);
}

/* Custom arrow */
body.bp-user .hfdn-profile-nav-dropdown::after {
    content: "▾";
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #888;
    pointer-events: none;
}

@media (min-width: 768px) {
  body.bp-user .hfdn-profile-nav-dropdown select {
    max-width: 420px;
  }
}

body.bp-user .hfdn-profile-nav-dropdown select {
    background: #f9f9fb;
    border: 1px solid #e6e6ef;
}

body.bp-user #buddypress,
body.bp-user .bb-profile-nav-dropdown-wrapper {
    overflow: visible !important;
}

/* --- HFDN Profile Nav Dropdown: bulletproof styling --- */

/* Make sure nothing clips the native select */
body.bp-user #buddypress,
body.bp-user #item-body,
body.bp-user .bp-wrap {
  overflow: visible !important;
}

/* Wrapper */
body.bp-user .hfdn-profile-nav-dropdown {
  margin: 18px 0 24px;
  position: relative;
  width: 100%;
}

/* Kill any previous pseudo-arrow */
body.bp-user .hfdn-profile-nav-dropdown::after {
  content: none !important;
}

/* The select */
body.bp-user .hfdn-profile-nav-dropdown select {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;

  /* FIX the clipping: use explicit height + zero vertical padding */
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 46px 0 16px !important;

  border-radius: 12px !important;
  border: 1px solid rgba(0,0,0,.14) !important;
  background-color: #fff !important;

  /* Remove OS arrow, we add our own */
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;

  font-size: 16px !important;
  font-weight: 500 !important;
  color: #111 !important;

  /* Custom arrow (SVG) */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath fill='%23888' d='M7 10L0 2.5 1.6 1 7 7 12.4 1 14 2.5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 16px center !important;
  background-size: 12px 8px !important;

  cursor: pointer !important;
}

/* Hover/Focus */
body.bp-user .hfdn-profile-nav-dropdown select:hover {
  border-color: #ff4f8b !important;
}
body.bp-user .hfdn-profile-nav-dropdown select:focus {
  outline: none !important;
  border-color: #ff4f8b !important;
  box-shadow: 0 0 0 3px rgba(255,79,139,.14) !important;
}

/* Desktop: keep it from looking comically wide */
@media (min-width: 768px) {
  body.bp-user .hfdn-profile-nav-dropdown {
    max-width: 420px;
  }
}

/* HFDN - GamiPress Logs "card" styling to match BuddyBoss points tiles */
.hfdn-gamipress-logs {
  /* layout / alignment */
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  clear: both;

  /* visual */
  background: #fff;
  border: 1px solid #d9d9d9;   /* hard gray outline */
  border-radius: 12px;         /* match the tiles */
  box-shadow: none;            /* tiles look flat, not "floating" */

  /* spacing */
  margin-top: 18px;            /* consistent with the other sections */
  padding: 24px;
}

/* Normalize list spacing inside logs output */
.hfdn-gamipress-logs ul,
.hfdn-gamipress-logs ol {
  margin: 0;
  padding-left: 18px;
}

/* Each log line: give a little breathing room and readable wrapping */
.hfdn-gamipress-logs li,
.hfdn-gamipress-logs p {
  margin: 0 0 10px 0;
  word-break: break-word;
}

/* Optional: if logs render as plain text lines without <li>, keep spacing nice */
.hfdn-gamipress-logs > *:last-child {
  margin-bottom: 0;
}