/* =========================================================================
   ATH SIMPLE UI — v1.1.0
   -------------------------------------------------------------------------
   Purpose: make the existing Feed / Bookings / Commerce Hub screens easier
   to use WITHOUT removing any feature, shortcode, class name, AJAX call,
   or JS behavior. Nothing else in the plugin was touched.

   How it works: this file loads LAST (after hustle-feed.css, ath-bookings.css,
   ath-commerce-hub.css, app-dock.css) and overrides only the visual layer —
   spacing, hierarchy, button/card consistency, and layout width. Every rule
   below targets classes that already exist in the plugin's own markup.

   Safe to disable: comment out the wp_enqueue_style() call for
   'ath-simple-ui' in ath-hustle-feed.php / class-ath-bookings.php /
   class-ath-commerce-hub.php and everything reverts to the old look
   instantly — no other file needs to change.
   ========================================================================= */

:root{
  /* Brand colors, collected from the existing CSS so every module
     finally references the SAME values instead of 40+ near-duplicate hexes. */
  --ath-bg:            #05070d;
  --ath-surface:       rgba(8,13,24,.96);
  --ath-surface-soft:  rgba(255,255,255,.045);
  --ath-border:        rgba(255,255,255,.10);
  --ath-border-soft:   rgba(255,255,255,.16);

  --ath-text:          #ffffff;
  --ath-text-dim:      rgba(255,255,255,.68);
  --ath-text-faint:    rgba(255,255,255,.52);

  --ath-primary:       #ff8a00;
  --ath-primary-grad:  linear-gradient(135deg,#ffb21a,#ff6a00);
  --ath-primary-ink:   #05070d;
  --ath-accent:        #00c4ff;
  --ath-success:       #56ff8c;
  --ath-success-bg:    rgba(86,255,140,.10);
  --ath-success-border:rgba(86,255,140,.24);
  --ath-danger:        #ff8a8a;
  --ath-danger-bg:     rgba(255,80,80,.10);
  --ath-danger-border: rgba(255,80,80,.24);

  --ath-radius-lg:  22px;
  --ath-radius-md:  16px;
  --ath-radius-pill:999px;

  --ath-space-1: 8px;
  --ath-space-2: 12px;
  --ath-space-3: 16px;
  --ath-space-4: 24px;

  --ath-shadow: 0 14px 34px rgba(0,0,0,.24);
}

/* -------------------------------------------------------------------------
   0. Accessibility basics the legacy CSS never set.
   ---------------------------------------------------------------------- */
.ath-hustle-feed a:focus-visible,
.ath-hustle-feed button:focus-visible,
.ath-bookings a:focus-visible,
.ath-bookings button:focus-visible,
.ath-selling-hub a:focus-visible,
.ath-selling-hub button:focus-visible,
.ath-commerce-workspace a:focus-visible,
.ath-commerce-workspace button:focus-visible{
  outline: 2px solid var(--ath-accent) !important;
  outline-offset: 2px !important;
}
@media (prefers-reduced-motion: reduce){
  .ath-hustle-feed *, .ath-bookings *, .ath-selling-hub *{
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* -------------------------------------------------------------------------
   1. FEED — read as one clear column instead of a dense 3-up grid.
   A feed is scanned top-to-bottom; one column per row is faster to read
   and far friendlier on phones (still centered/contained on desktop).
   ---------------------------------------------------------------------- */
.ath-hustle-feed{
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ath-feed-grid{
  grid-template-columns: 1fr !important;
  gap: var(--ath-space-3) !important;
}
.ath-share-move{
  max-width: 640px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Card: consistent radius/shadow, less visual noise per card. */
.ath-feed-card{
  border-radius: var(--ath-radius-lg) !important;
  box-shadow: var(--ath-shadow) !important;
  border-color: var(--ath-border) !important;
}
.ath-feed-card-top{ padding: var(--ath-space-2) var(--ath-space-3) !important; }
.ath-feed-caption{ padding: var(--ath-space-2) var(--ath-space-3) 0 !important; }
.ath-feed-location{ padding: 0 var(--ath-space-3) var(--ath-space-2) !important; }

/* Action row: one clear primary action, everything else stays secondary
   and wraps neatly instead of crowding into a single line. */
.ath-feed-actions{
  padding: var(--ath-space-2) var(--ath-space-3) var(--ath-space-3) !important;
  gap: var(--ath-space-1) !important;
  flex-wrap: wrap !important;
}
.ath-feed-actions a,
.ath-tap-in-btn,
.ath-real-ones{
  min-height: 40px !important;
  padding: 9px 14px !important;
  font-size: 11px !important;
}
.ath-tap-in-btn{
  background: var(--ath-primary-grad) !important;
  border: 0 !important;
  color: var(--ath-primary-ink) !important;
  font-weight: 950 !important;
  order: -1; /* the one thing people actually come to do sits first */
}
.ath-tap-in-btn.is-tapped,
.ath-tap-in-btn:disabled{
  background: var(--ath-success-bg) !important;
  border: 1px solid var(--ath-success-border) !important;
  color: var(--ath-success) !important;
}

/* Composer: fewer competing accents, clearer field grouping. */
.ath-share-grid{ gap: var(--ath-space-2) !important; }
.ath-field textarea,
.ath-field input,
.ath-field select{
  border-radius: var(--ath-radius-md) !important;
}
.ath-feed-btn{
  min-height: 50px !important;
  width: 100% !important; /* full-width primary action = easy to find on mobile */
}

/* -------------------------------------------------------------------------
   2. BOOKINGS — calmer catalog/workspace, consistent card language with
   the feed so the app doesn't feel like three different products stitched
   together.
   ---------------------------------------------------------------------- */
.ath-bookings{ max-width: 900px !important; margin-left:auto !important; margin-right:auto !important; }
.ath-booking-hero,
.ath-booking-catalog,
.ath-booking-stats,
.ath-booking-empty{
  border-radius: var(--ath-radius-lg) !important;
  box-shadow: var(--ath-shadow) !important;
}
.ath-booking-tabs{
  gap: var(--ath-space-1) !important;
  flex-wrap: wrap !important;
}
.ath-booking-controls{ gap: var(--ath-space-2) !important; }
.ath-booking-payment-choice{ border-radius: var(--ath-radius-md) !important; }

/* -------------------------------------------------------------------------
   3. COMMERCE HUB / SELLING SETUP — turn the setup flow into one clear
   step at a time instead of every mode/tab competing for attention.
   ---------------------------------------------------------------------- */
.ath-selling-hub{ max-width: 760px !important; margin-left:auto !important; margin-right:auto !important; }
.ath-selling-hub-nav{
  gap: var(--ath-space-1) !important;
  flex-wrap: wrap !important;
}
.ath-selling-choice,
.ath-selling-focus-card,
.ath-payout-method,
.ath-payout-status-card{
  border-radius: var(--ath-radius-lg) !important;
  box-shadow: var(--ath-shadow) !important;
}
.ath-selling-choice{
  display: flex !important;
  align-items: center !important;
  gap: var(--ath-space-2) !important;
  padding: var(--ath-space-3) !important;
}
.ath-payout-fields,
.ath-payout-form{ gap: var(--ath-space-2) !important; }
.ath-commerce-workspace-head{
  gap: var(--ath-space-1) !important;
  flex-wrap: wrap !important;
}

/* -------------------------------------------------------------------------
   4. Shared button hierarchy — used across feed / bookings / commerce so
   "the orange gradient pill" always means the same thing: the one primary
   action on that screen.
   ---------------------------------------------------------------------- */
.ath-collab-form button,
.ath-collab-response-form button,
.ath-collab-response-toggle,
.ath-booking-controls .button-primary,
.ath-payout-actions .button-primary{
  min-height: 44px !important;
  border-radius: var(--ath-radius-pill) !important;
}

/* -------------------------------------------------------------------------
   5. MusiCon theme nav vs. Hustle Feed dock.
   -------------------------------------------------------------------------
   The site was running two navigation systems at once: MusiCon's own
   top navbar menu + off-canvas sidebar menu (theme: templates/header/
   site-navbar.php, site-brand.php, class .site-navbar / .site-sidebar),
   and Hustle Feed's own bottom app dock (rendered by render_app_dock()),
   both present on every page.

   Decision: Hustle Feed's dock is the one nav system. This section hides
   ONLY the navigational parts of MusiCon's header — the top nav menu,
   the login/logout menu, the off-canvas sidebar menu, and their toggle
   buttons. It deliberately leaves the site logo/title (.site-brand) and
   the search form alone, since the dock doesn't replace either of those.

   This lives here (in the plugin) instead of in the theme's own files so
   a theme update can't silently wipe it. If MusiCon is ever swapped for
   a different theme, or updated in a way that renames these classes,
   this whole section is inert and safe to delete — nothing else depends
   on it.
   ---------------------------------------------------------------------- */
.site-navbar .navbar-menu,
.site-navbar .menu-before-login-container,
.site-navbar .menu-after-login-container,
.site-navbar #icon-nav,
.site-sidebar,
.menu-toggle{
  display: none !important;
}
/* MusiCon reserves left-margin for the sidebar via a sibling selector,
   which still fires even though .site-sidebar above is display:none
   (display:none doesn't remove it from the DOM). Zero that margin back
   out so page content isn't left with a blank gutter on desktop. */
.site-sidebar ~ .site-content,
.site-sidebar ~ .site-footer,
.hide-sidenav ~ .site-content,
.hide-sidenav ~ .site-footer{
  margin-left: 0 !important;
  margin-inline-start: 0 !important;
}

/* -------------------------------------------------------------------------
   6. Share Profile / Edit Profile on the Artist (Vibes) profile page.
   -------------------------------------------------------------------------
   These reuse My Hustle's exact button markup and classes (shc-share-profile,
   shc-edit-profile-link) so the existing global JS (my-hustle.js, already
   loaded sitewide) just works -- no new JS added. But those classes'
   *base* styles assume My Hustle's own profile grid (one of them is
   position:absolute there, meant to sit pinned over that grid's header).
   This page uses a plain hero layout, so put them in a normal row instead.
   Scoped to .ath-artist-page only -- My Hustle's own profile is untouched.
   ---------------------------------------------------------------------- */
.ath-artist-page .ath-profile-header-actions{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 16px !important;
}
.ath-artist-page .ath-profile-header-actions .shc-edit-profile-link,
.ath-artist-page .ath-profile-header-actions .shc-share-profile{
  position: static !important;
  align-self: auto !important;
  justify-self: auto !important;
}

/* -------------------------------------------------------------------------
   7. Profile image not fitting inside its frame.
   -------------------------------------------------------------------------
   .ath-artist-avatar already has a fixed width/height and object-fit:cover,
   which should crop any photo to a clean square -- but it sits inside a
   flex container (.ath-artist-hero__inner{display:flex}), and flex items
   default to a minimum size based on their own content's natural size.
   For an <img>, that "natural size" is the source photo's real dimensions,
   so a large uploaded photo can force the box wider/taller than the 190px
   frame and spill past its rounded corners -- regardless of the width/
   height already set. min-width/min-height:0 is the standard fix: it tells
   the flex item it's allowed to shrink to the size we actually gave it.
   ---------------------------------------------------------------------- */
.ath-artist-avatar{
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  display: block !important;
}

/* -------------------------------------------------------------------------
   8. "Let's Network" summary card, brought in line with the rest of the
   redesigned profile (same radius/spacing scale, orange for the numbers
   that matter, clearer contrast, no outline borders) -- same markup/JS/
   data as before.
   ---------------------------------------------------------------------- */
.ath-artist-page .ath-tap-profile-summary{
  border: 0 !important;
  border-radius: var(--ath-radius-lg) !important;
  box-shadow: var(--ath-shadow) !important;
  padding: var(--ath-space-3) !important;
}
/* Fix: "LET'S NETWORK" and the "Your Profile"/Tap In control were
   overlapping on narrow screens -- the row didn't wrap. Let it wrap and
   give the title room to shrink instead of pushing past the control. */
.ath-artist-page .ath-tap-summary-main{
  flex-wrap: wrap !important;
  row-gap: var(--ath-space-1) !important;
}
.ath-artist-page .ath-tap-summary-title{
  font-size: 20px !important;
  letter-spacing: -0.01em !important;
  min-width: 0 !important;
}
.ath-artist-page .ath-network-views-count strong,
.ath-artist-page .ath-tapped-in-preview-head span{
  color: var(--ath-primary) !important;
}
.ath-artist-page .ath-user-tap-btn{
  background: var(--ath-primary-grad) !important;
  border: 0 !important;
  color: var(--ath-primary-ink) !important;
  border-radius: var(--ath-radius-pill) !important;
  font-weight: 950 !important;
}
.ath-artist-page .ath-user-tap-btn.is-tapped{
  background: var(--ath-success-bg) !important;
  border: 0 !important;
  color: var(--ath-success) !important;
}
.ath-artist-page .ath-user-tap-self{
  border: 0 !important;
  border-radius: var(--ath-radius-pill) !important;
  background: var(--ath-surface-soft) !important;
  font-weight: 900 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
}
.ath-artist-page .ath-tapped-in-chip{
  border: 0 !important;
  border-radius: var(--ath-radius-md) !important;
}
.ath-artist-page .ath-artist-stats span{
  border: 0 !important;
}
.ath-artist-page .ath-profile-we-outside-card{
  border: 0 !important;
}

/* Let's Collab, styled the same way as the Share/Edit pill row. */
.ath-artist-page .shc-collab-profile{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  min-height: 44px !important;
  padding: 9px 16px !important;
  border: 0 !important;
  border-radius: var(--ath-radius-pill) !important;
  background: var(--ath-surface-soft) !important;
  color: var(--ath-text) !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

/* We Outside / Project Link-Up sections reused on this page -- same
   containment width as the rest of the redesigned profile so they don't
   run edge-to-edge while everything above them is centered/contained. */
.ath-artist-page .ath-profile-we-outside,
.ath-artist-page .ath-profile-project-linkup,
.ath-artist-page .ath-tap-profile-summary{
  max-width: 1180px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* -------------------------------------------------------------------------
   9. Edit Profile modal appearing to render BEHIND/blended with the page
   content instead of cleanly on top of it. The modal's own CSS already
   sets position:fixed with a very high z-index, so this shouldn't be
   possible -- but without a browser to inspect the live stacking context,
   the reliable fix is to make the sections behind it invisible for as
   long as the modal is open (html.ath-inline-profile-open is already
   toggled by the existing JS), which guarantees no visual overlap
   regardless of the underlying cause. Nothing here changes what's in the
   modal or how it saves.
   ---------------------------------------------------------------------- */
html.ath-inline-profile-open .ath-tap-profile-summary,
html.ath-inline-profile-open .ath-profile-we-outside,
html.ath-inline-profile-open .ath-profile-project-linkup{
  visibility: hidden !important;
}