/*
Mobile CSS for CHC Network - PeepSo Theme Gecko Child
Extracted from main style.css for better organization
*/

/*============================
MOBILE RESPONSIVE STYLES
=============================*/

/*============================
HOME PAGE MOBILE LAYOUT
=============================*/

/* Mobile home page layout - hide sidebars, show only feed */
@media (max-width: 768px) {

  /* Target home page specifically for better control */
  .chc-home-page .home-container {
    display: block !important;
    /* Override grid layout */
    padding: 20px 16px !important;
    /* Reduce padding for mobile */
    max-width: 100% !important;
    grid-template-columns: none !important;
    /* Remove grid columns */
    grid-template-areas: none !important;
    /* Remove grid areas */
  }

  /* Hide both sidebars on mobile */
  .chc-home-page .left-sidebar,
  .chc-home-page .right-sidebar {
    display: none !important;
  }

  /* Make home feed take full width */
  .chc-home-page .home-feed {
    width: 100% !important;
    padding: 0 !important;
    min-height: auto !important;
    grid-area: unset !important;
    /* Remove grid area assignment */
  }

  /* Ensure login container is also mobile-friendly */
  .chc-home-page .login-container {
    padding: 20px 16px !important;
    max-width: 100% !important;
  }

  /* General mobile improvements for all home containers */
  .home-container {
    display: block !important;
    padding: 20px 16px !important;
    max-width: 100% !important;
  }

  .left-sidebar,
  .right-sidebar {
    display: none !important;
  }

  .home-feed {
    width: 100% !important;
    padding: 0 !important;
    min-height: auto !important;
  }
}

/* Additional mobile adjustments for smaller screens */
@media (max-width: 480px) {

  .chc-home-page .home-container,
  .home-container {
    padding: 16px 12px !important;
  }

  .chc-home-page .login-container,
  .login-container {
    padding: 16px 12px !important;
  }
}

/* Mobile-specific improvements for home page content */
@media (max-width: 768px) {

  /* Ensure main container has proper mobile spacing */
  .chc-home-page .main-container,
  .main-container {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Improve mobile readability and spacing for posts */
  .chc-home-page .home-feed .ps-post,
  .home-feed .ps-post {
    margin-bottom: 16px !important;
    border-radius: 8px !important;
    /* Add rounded corners for mobile */
  }

  /* Ensure proper mobile spacing for post content */
  .chc-home-page .home-feed .ps-post__content,
  .home-feed .ps-post__content {
    padding: 12px 16px !important;
    font-size: 14px !important;
    /* Optimize font size for mobile */
    line-height: 1.5 !important;
  }

  /* Mobile-friendly post actions */
  .chc-home-page .home-feed .ps-post__actions,
  .home-feed .ps-post__actions {
    padding: 8px 16px !important;
  }

  /* Optimize post headers for mobile */
  .chc-home-page .home-feed .ps-post__header,
  .home-feed .ps-post__header {
    padding: 12px 16px 8px 16px !important;
  }

  /* Ensure proper mobile touch targets */
  .chc-home-page .home-feed .ps-post__action,
  .home-feed .ps-post__action {
    min-height: 44px !important;
    /* Minimum touch target size */
    padding: 8px 12px !important;
  }

  /* Mobile viewport optimizations */
  .chc-home-page .home-feed {
    overflow-x: hidden !important;
    /* Prevent horizontal scroll */
  }

  /* Ensure images are responsive in mobile feed */
  .chc-home-page .home-feed img,
  .home-feed img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Mobile-friendly video content */
  .chc-home-page .home-feed video,
  .home-feed video {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Improve mobile form elements */
  .chc-home-page .home-feed input,
  .chc-home-page .home-feed textarea,
  .home-feed input,
  .home-feed textarea {
    font-size: 16px !important;
    /* Prevent zoom on iOS */
    max-width: 100% !important;
  }
}

/* Desktop first - responsive breakpoint */
@media (min-width: 1200px) {
  #sidebar-left {
    min-width: 285px;
    max-width: 285px;
  }
}

@media (min-width: 1024px) and (max-width: 1199px) {
  #sidebar-left {
    min-width: 240px;
    max-width: 240px;
  }
}

/* Removed fixed width for #main .content to allow responsive behavior */
/* Width is now controlled by main style.css responsive rules */

/*  mobile styles */
@media (max-width: 768px) {

  /* Hide left sidebar */
  #sidebar-left {
    display: none !important;
  }

  /* Fix page navigation menu items on mobile */
  .ps-focus__menu {
    height: auto !important;
    min-height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-top: 1px solid #E0E0E0 !important;
    border-bottom: none !important;
  }

  .ps-focus__menu-inner {
    height: auto !important;
    min-height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .ps-focus__menu-item {
    padding: 12px 16px !important;
    height: auto !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    border-bottom: 2px solid transparent !important;
    border-top: none !important;
    box-shadow: none !important;
    background: transparent !important;
    margin: 0 !important;
  }

  /* Move active indicator to bottom with custom image */
  .ps-focus__menu-item--active,
  .ps-focus__menu-item.ps-focus__menu-item--active,
  a.ps-focus__menu-item--active,
  a.ps-focus__menu-item.ps-focus__menu-item--active {
    border-bottom: none !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: url('/wp-content/themes/peepso-theme-gecko-child/assets/icons/active-menu-tab.png') !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: auto 3px !important;
    box-shadow: none !important;
  }

  /* Remove any top borders or indicators */
  .ps-focus__menu-item--active::before,
  .ps-focus__menu-item--active::after {
    display: none !important;
  }

  /* Left align page name and description on mobile */
  .ps-focus__title,
  .ps-focus__name,
  .ps-focus__desc {
    text-align: left !important;
  }

  .ps-focus__info {
    text-align: left !important;
  }
}

/* Additional mobile fixes for smaller screens */
@media (max-width: 480px) {
  .ps-focus__menu-item {
    padding: 10px 12px !important;
    min-height: 44px !important;
    font-size: 14px !important;
  }

  .ps-focus__menu-item span {
    font-size: 14px !important;
    line-height: 1.2 !important;
  }

  .ps-menu-icon {
    width: 18px !important;
    height: 18px !important;
    margin-right: 4px !important;
  }
}

@media (max-width: 768px) {

  /* Hide all userbar children by default */
  .gc-header__addons .psw-userbar__user>* {
    display: none !important;
  }

  /* Show notifications and messages */
  .gc-header__addons .ps-notifs,
  .gc-header__addons .ps-notif--messages {
    display: flex !important;
  }

  /* Hide profile and toggle */
  .gc-header__addons .psw-userbar__user-profile,
  .gc-header__addons .psw-userbar__toggle {
    display: none !important;
  }

  /* Ensure userbar and inner are visible */
  .gc-header__addons .psw-userbar,
  .gc-header__addons .psw-userbar__inner {
    display: flex !important;
  }

  /* Hide search and home icons */
  .gc-header__addons .gc-header__search-toggle,
  .gc-header__addons a[title="Home"] {
    display: none !important;
  }

  .gc-header__menu-toggle {
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-align: center;
    /* Remove any potential button default styles */
    background: none;
    cursor: pointer;
    /* Ensure no outline on focus for cleaner look */
    outline: none;
  }

  .gc-header__menu-toggle .gcis.gci-bars {
    font-size: 20px;
    color: #000;
    display: block;
    margin: 0;
    padding: 0;
    line-height: 0.8;
    /* Fine-tune vertical positioning */
    transform: translate(-13px, 5px)
  }

  .gc-header__menu-toggle .gcis {
    vertical-align: middle !important;
  }

}

/* hide side bar in peer group list */

/* Hide the entire sidebar on mobile devices */
@media screen and (max-width: 768px) {
  .group-sidebar {
    display: none !important;
  }
}

/* Alternative breakpoints you might consider */

/* For tablets and smaller */
@media screen and (max-width: 1024px) {
  .group-sidebar {
    display: none !important;
  }
}

/* For small tablets and mobile */
@media screen and (max-width: 480px) {
  .group-sidebar {
    display: none !important;
  }
}

/*
*****************
POSTS FEED MOBILE
*****************
*/

/* Simple Mobile Scaling for Comment Bar */
@media screen and (max-width: 768px) {

  /*
*****************
COMMENT SECTION
*****************
*/

  /* Keep avatar at original size on mobile */
  .ps-comments__reply .ps-avatar {
    flex-shrink: 0;
  }

  /* Scale down textarea more and shrink width for icons */
  .ps-comments__input {
    height: 28px !important;
    min-height: 28px !important;
    padding: 4px 70px 4px 8px !important;
    font-size: 13px;
    flex: 1 1 auto;
    min-width: 0;
  }

  /* Adjust input wrapper */
  .ps-comments__input-wrapper {
    position: relative;
    flex: 1;
  }

  /* Position action icons to the right of textarea */
  .ps-comments__input-actions {
    position: absolute !important;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex !important;
    gap: 3px;
    padding: 0;
    z-index: 10;
  }

  .ps-comments__input-action {
    display: inline-block !important;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    opacity: 1 !important;
    visibility: visible !important;
    margin: 0;
  }

  /* Ensure icons show up */
  .ps-comments__input-action:before {
    display: block !important;
    font-size: 12px;
    line-height: 24px;
  }

  /* Scale down buttons more */
  .ps-comments__reply-actions .ps-btn {
    padding: 4px 8px;
    font-size: 12px;
    height: 28px;
  }

  /* Reduce overall padding */
  .ps-comments__reply {
    padding: 8px;
  }

  .ps-comments__input-wrapper {
    position: relative;
    flex: 1;
    margin: 0 4px;
  }

  /*
**********************
ACTION BUTTONS SECTION
**********************
*/

  /* Tighter spacing for the action bar */
  .ps-post__actions-inner {
    margin-top: -2px !important;
    margin-bottom: 4px !important;
  }

  .ps-post__actions-inner.action-buttons {
    margin-left: -20px;
  }

  /* General button icon and text formatting */
  .ps-post__action {
    padding: 0 2px !important;
    margin-top: -2px !important;
  }

  .chc-action-button .ps-post__action>span,
  .chc-action-button .ps-post__action>span>span {
    font-family: "Mona Sans", sans-serif !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    letter-spacing: 0% !important;
    color: #666 !important;
  }

  .chc-action-button .ps-reaction-emoticon-0,
  .chc-action-button .ps-reaction-emoticon-1,
  .chc-action-button .ps-reaction-emoticon-2,
  .chc-action-button .ps-reaction-emoticon-3,
  .chc-action-button .ps-reaction-emoticon-4,
  .chc-action-button .ps-reaction-emoticon-5,
  .chc-action-button .ps-reaction-emoticon-6,
  .chc-action-button .ps-reaction-emoticon-7,
  .chc-action-button .ps-reaction-emoticon-8,
  .chc-action-button .ps-reaction-emoticon-9,
  .chc-action-button .ps-reaction-emoticon-10 {
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
  }

  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-0,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-1,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-2,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-3,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-4,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-5,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-6,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-7,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-8,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-9,
  .ps-reactions__likes .ps-reaction__like.ps-reaction-emoticon-10 {
    background-size: 14px 14px !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-block !important;
  }

  .ps-post__action--reaction.ps-reaction i,
  .ps-reaction.ps-post__action i {
    margin-right: 10px !important;
  }

  .ps-post__action--save i {
    width: 12px !important;
    height: 14px !important;
    margin-right: 3px !important;
  }

  .ps-post__action--follow i {
    width: 16px !important;
    height: 16px !important;
    margin-right: 1px !important;
  }

  /* Copy link icon (image) */
  .ps-post__action--copy-link img {
    width: 16px !important;
    height: 16px !important;
    margin-right: 2px !important;
  }

  /* Hide copy link label */
  .ps-post__action--copy-link span {
    display: none;
  }

  /* Save label text size */
  .ps-post__action--save::after {
    font-size: 13px !important;
  }

  /* Follow label text size */
  .ps-post__action--follow span {
    font-size: 13px !important;
    /* Label font size */
  }

  /* Specific child button positioning */
  .chc-action-button:nth-child(2) {
    transform: translateX(8px);
  }

  .chc-action-button:nth-child(3) {
    transform: translateX(18px);
    padding-right: 6px;
  }

  .chc-action-button:nth-child(4) {
    transform: translateX(28px);
    max-width: 50px;
  }

  /*
**********************
COMMENT SECTION
**********************
*/

  .ps-comments__input {
    padding-top: 10px !important;
  }

}