/* Shared responsive sizing. Font sizes in application styles use rem so browser
   text preferences and zoom continue to work. No device/monitor detection. */
:root {
    --site-content-width: 1440px;
    --site-gutter: clamp(16px, 2.5vw, 48px);
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
@media (min-width: 1280px) {
    html { font-size: clamp(100%, calc(50% + .625vw), 137.5%); }
}
body { font-size: 1rem; line-height: 1.65; }
.container {
    width: calc(100% - var(--site-gutter) * 2);
    max-width: var(--site-content-width);
}
@media (min-width: 2200px) {
    :root { --site-content-width: 1640px; }
}
.row > [class*="col-"], .row > .col,
.task-listing-description, .job-listing-description,
.freelancer, .dashboard-content-container, .message-content,
.deal-main-column, .deal-sidebar-column { min-width: 0; }
img { max-width: 100%; }
textarea { resize: vertical; }
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=file]):not([type=submit]), select {
    min-height: 2.75rem;
}
input, select, textarea { font-size: 1rem; }
.button, button.button { min-height: 2.75rem; height: auto; line-height: 1.5; white-space: normal; }
h1 { font-size: clamp(1.75rem, 2.4vw, 2.5rem); line-height: 1.2; }
h2 { line-height: 1.3; }
.task-listing-title, .job-listing-title, .service-card h2,
.profile-name-row, .deal-title, .notification-item, .blog-post-content,
.user-tabs-content, .message-bubble { overflow-wrap: anywhere; }
.user-tabs-header, .profile-tabs, .service-pagination { flex-wrap: wrap; }
.user-tabs-header { height: auto; }
.popup-tabs-nav a { height: auto; min-height: 3rem; line-height: 1.5; padding-top: .75rem; padding-bottom: .75rem; }
.zoom-anim-dialog { max-width: calc(100vw - 32px); }
.mfp-content { max-width: 100%; }
.notice-bell span { min-width: 1.1rem; height: 1.1rem; font-size: .625rem; line-height: 1.1rem; }
.service-table-scroll, .table-responsive { max-width: 100%; overflow-x: auto; }
.message-bubble .message-text,
.message-bubble.service-chat-notification .message-text { max-width: calc(100% - 70px); overflow-wrap: anywhere; }
.home-header-search-input { position: absolute; top: calc(100% + 10px); right: 0; z-index: 20; background: #fff; }
.service-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 195px), 1fr)); }
.deal-content-wrapper { grid-template-columns: minmax(0, 1fr) minmax(280px, 21rem); }
.site-footer .site-footer-grid { grid-template-columns: minmax(220px, 1fr) auto; align-items: center; gap: 28px; padding: 32px 0; }
.site-footer .site-footer-brand p { margin: 12px 0 0; font-size: .8125rem; }
.site-footer .site-footer-grid > nav { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 14px 28px; }
.site-footer .site-footer-grid > nav a { font-size: .8125rem; padding: 8px 0; }
.site-footer .site-footer-bottom { padding: 18px 0; }
@media (max-width: 991px) {
    .site-footer .site-footer-grid { grid-template-columns: 1fr; gap: 20px; }
    .site-footer .site-footer-grid > nav { justify-content: flex-start; }
}

/* Both header variants keep their existing menu behavior. Switch before the
   desktop navigation and signed-in actions run out of room. */
@media (min-width: 1200px) {
    #header-container > .container > .row { flex-wrap: nowrap; align-items: center; }
    #header-container > .container > .row > .col-lg-7 { flex: 1 1 auto; max-width: none; }
    #header-container > .container > .row > .col-lg-5 { flex: 0 0 auto; width: auto; max-width: none; }
    #header-container > .container > .row > .col-lg-7 > .row { flex-wrap: nowrap; align-items: center; }
    #header-container .col-lg-3 { flex: 0 0 auto; width: auto; max-width: none; }
    #header-container .col-lg-9 { flex: 1 1 auto; width: auto; max-width: none; }
    #header-container #logo img { width: clamp(140px, 10vw, 190px); max-width: 100%; }
    #header-container #navigation { margin-top: 0; }
    #header-container #navigation > ul > li > a { font-size: .875rem; padding: .5rem; line-height: 1.5; }
    #header-container .right-side { display: flex; align-items: center; height: auto; min-height: 82px; }
    #header-container .right-side > .header-widget { display: flex; align-items: center; height: 82px; min-height: 82px; padding-top: 0 !important; padding-bottom: 0 !important; }
}
@media (min-width: 992px) and (max-width: 1199px) {
    #wrapper > header.d-lg-block { display: none !important; }
    #wrapper > header.d-lg-none { display: block !important; }
    #header-container > .container > .row > .col-lg-5 { flex: 0 0 35%; max-width: 35%; }
    #header-container > .container > .row > .col-lg-7 { flex: 0 0 65%; max-width: 65%; }
}
@media (max-width: 1199px) {
    #wrapper #header-container .right-side { display: flex !important; align-items: center; justify-content: flex-end; gap: 4px; height: 70px !important; min-height: 70px; }
    #wrapper #header-container #logo { display: flex; align-items: center; height: 70px; min-height: 70px; }
    #wrapper #header-container .right-side > .mobile-button { display: inline-flex !important; align-items: center; justify-content: center; width: 36px !important; min-width: 36px !important; height: 44px !important; margin: 0 !important; padding: 0 !important; }
    #wrapper #header-container .home-header-search-toggle { width: 36px !important; height: 44px; padding: 0 !important; }
    #wrapper #header-container .home-header-search-input { position: absolute; top: 48px; right: 0; z-index: 20; width: min(300px, calc(100vw - 40px)); background: #fff; }
    #wrapper #header-container .home-mobile-menu { top: 100%; }
}
@media (max-width: 1024px) {
    .deal-content-wrapper { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 991px) {
    .profile-list-menu { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 24px; }
    .profile-list-menu > a { flex: 0 0 auto; min-height: 44px; white-space: nowrap; padding: 10px 12px; }
    .profile-list-menu > hr { display: none; }
    .box-user-avatar { width: 64px; height: 64px; }
    .box-user-avatar > div { width: 64px; height: 64px; }
    .box-user-avatar > div > img { width: 100%; height: 100%; object-fit: cover; }
    .box-user-avatar .profile-replace-avatar { padding: 18px 0; font-size: .75rem; }
}
@media (max-width: 767px) {
    .container { padding-left: 0; padding-right: 0; }
    .service-single-grid, .service-package-grid { grid-template-columns: minmax(0, 1fr); }
    .task-listing { flex-direction: column; }
    .task-listing-bid { width: 100%; max-width: none; }
    .task-listing-details, .job-listing-details { padding: 20px; }
    .task-listing-bid-inner { padding: 20px; }
    .freelancers-container.freelancers-grid-layout .freelancer { width: 100%; }
    .notify-box { flex-wrap: wrap; gap: 12px; height: auto; }
    .profile-identity > *, .profile-name-row > * { min-width: 0; }
    .profile-name-row, .service-card-footer { flex-wrap: wrap; }
    .profile-detail-list > div { gap: 12px; }
    .dashboard-container { height: auto; min-height: calc(100dvh - 82px); }
    .messages-container-inner { display: flex; flex-direction: column; height: calc(100dvh - 82px); min-height: 480px; }
    .messages-container-inner .messages-inbox { flex: 0 0 auto; width: 100%; max-width: 100%; max-height: 160px; overflow-y: auto; }
    .messages-container-inner .messages-inbox ul { max-height: none; }
    .messages-container-inner .message-content-inner { padding: 16px; }
    .messages-container-inner .message-content { flex: 1 1 auto; min-width: 0; min-height: 320px; }
    .message-bubble .message-avatar, .message-bubble .message-avatar img { width: 36px; height: 36px; }
    .message-bubble .message-text, .message-bubble.service-chat-notification .message-text { margin-left: 48px; max-width: calc(100% - 48px); }
    .message-bubble.me .message-text { margin-left: 0; margin-right: 48px; }
}
@media (max-width: 479px) {
    #wrapper #header-container > .container > .row > :first-child { flex: 0 0 36%; max-width: 36%; }
    #wrapper #header-container > .container > .row > :nth-child(2) { flex: 0 0 64%; max-width: 64%; }
    #wrapper #header-container #logo img { max-width: 100%; height: auto; }
    #wrapper #header-container .right-side { gap: 0; }
    #wrapper #header-container .right-side > .mobile-button { width: 32px !important; min-width: 32px !important; }
    #wrapper #header-container .home-header-search-toggle { width: 32px !important; }
    .popup-tab-content { padding: 20px; }
    .profile-hero-topline, .profile-hero-topline a, .profile-availability { font-size: .75rem; }
    .popup-tabs-nav { display: flex; flex-wrap: wrap; }
    .site-footer-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-height: 700px) and (min-width: 768px) {
    .messages-container-inner { height: calc(100dvh - 92px); min-height: 320px; }
}