/* ==========================================================================
   Divi UI polish layer (audit 28.10.2026)
   --------------------------------------------------------------------------
   Loaded AFTER style.css. Additive only: every rule is either written with
   :where() (zero specificity — any existing rule in style.css still wins) or
   limited to keyboard / accessibility / motion preferences. Nothing here
   changes layout, colours or behaviour of existing components.
   To disable: remove the <link> to polish.css from index.php.
   ========================================================================== */

/* 1. Rendering consistency ------------------------------------------------ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Form controls do not inherit the page font by default, so Georgian text in
   buttons / inputs fell back to the OS font. Zero specificity: components that
   already set their own font keep it. */
:where(button, input, select, textarea) {
    font-family: inherit;
}

/* 2. Touch devices: no 300 ms tap delay / double-tap zoom on controls, and no
      grey flash on tap ---------------------------------------------------- */
:where(a, button, [role="button"], label, select, summary, input[type="checkbox"], input[type="radio"], input[type="range"]) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* iOS Safari zooms the page when a text field under 16px gets focus.
   Applies only to iOS and only to fields without their own font-size. */
@supports (-webkit-touch-callout: none) {
    :where(input[type="text"], input[type="search"], input[type="email"], input[type="password"],
           input[type="tel"], input[type="url"], input[type="number"], textarea) {
        font-size: max(16px, 1em);
    }
}

/* 3. Keyboard accessibility ------------------------------------------------
   style.css removes the focus outline on many controls (outline:none), which
   leaves keyboard users without any focus indicator. :focus-visible fires only
   for keyboard navigation, so mouse/touch users see no change. Text inputs and
   contenteditable areas are excluded on purpose (they already show a caret and
   most have their own focused style). */
:where(a[href], button, [role="button"], summary, select, [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--sa-primary, #3568f5) !important;
    outline-offset: 2px !important;
    border-radius: inherit;
}

/* 4. Gentle, consistent micro-interactions (zero specificity) --------------- */
:where(a, button, [role="button"], select) {
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, opacity .15s ease;
}
:where(button, [role="button"]):disabled,
:where(button, [role="button"])[aria-disabled="true"] {
    cursor: not-allowed;
}

::selection {
    background: rgba(53, 104, 245, .22);
}

/* 5. Respect "reduce motion" OS setting (vestibular disorders) -------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto !important; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* 6. Windows high-contrast / forced-colors: keep focus visible ------------- */
@media (forced-colors: active) {
    :where(a[href], button, [role="button"], summary, select, [tabindex]):focus-visible {
        outline: 2px solid Highlight !important;
    }
}

/* ==========================================================================
   7. Layout fixes found in live screenshots review (28.10.2026)
   ========================================================================== */

/* 7a. Post action bar: "😊 0 / რეაქცია" wrapped onto two lines while
       comment / share stayed on one. Equal-width, single-line, centred. */
.post-actions.reaction-row { align-items: stretch; }
.post-actions.reaction-row > .reaction-wrap { display: flex; flex: 1 1 0; min-width: 0; }
.post-actions.reaction-row > .post-action { flex: 1 1 0; min-width: 0; }
.post-actions.reaction-row .reaction-wrap > .reaction-main { flex: 1 1 auto; }
.post-actions.reaction-row .post-action {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 5px; white-space: nowrap;
}

/* 7b. Group header: the group title was drawn half under the cover image.
       Start the text block below the cover; avatar keeps overlapping it. */
/* (applies on phones too — the same overlap was visible on iOS) */
.group-profile-hero .profile-identity { align-items: flex-start; }
.group-profile-hero .profile-identity .profile-identity-text { padding-top: 46px; }

/* 7c. Composer: "ფოტო / ვიდეო" had a bordered wrapper around a bordered
       button (double frame). Keep the inner button's frame only. */
.composer-toolbar .media-picker.media-picker-unified {
    border: 0 !important; background: transparent !important;
    box-shadow: none !important; padding: 0 !important; height: auto;
}

/* 7d. Search results: group cards squeezed name and meta into narrow columns. */
.search-profile-card { flex-wrap: wrap; }
.search-profile-main { flex: 1 1 180px; min-width: 0; }
.search-profile-main:not(:has(img, .avatar-circle, .avatar-image)) {
    flex-direction: column; align-items: flex-start; gap: 2px;
}
.search-profile-actions { flex: 0 0 auto; }

/* 7e. Reels: white "For You" label disappeared on bright images. */
.social-video-reels-title { text-shadow: 0 1px 6px rgba(0, 0, 0, .7); }

/* ==========================================================================
   8. Mobile fixes found in iPhone screenshots review (28.10.2026)
   ========================================================================== */

/* 8a. Bottom nav: on touch screens :hover "sticks" after a tap, so several
       tabs looked active at once (home + notifications + chat ...). Only the
       real current/open tab (.is-active) keeps the highlight. */
@media (hover: none) {
    .mobile-bottom-nav__item:hover:not(.is-active):not(.mobile-bottom-nav__compose) {
        background: transparent;
        color: #667085;
    }
}
/* The "პოსტი" button is an action, not a page: its blue circle is enough.
   A permanent tinted pill made it look like an always-selected tab. */
.mobile-bottom-nav__compose { background: transparent; }

/* 8b. Post author line: keep "· მფლობელი" together instead of leaving a
       dangling dot at the end of the first line. */
.post-group-badge { white-space: nowrap; }

/* 8c. Post action bar on narrow phones: three equal columns must fit. */
@media (max-width: 430px) {
    .post-actions.reaction-row .post-action {
        font-size: 12px; gap: 3px; padding-left: 2px; padding-right: 2px;
    }
}

/* 8d. Composer background palette: 7 swatches + label did not fit one row,
       leaving the dark swatch alone on a second line. */
@media (max-width: 430px) {
    .post-background-picker { gap: 4px; }
    .post-background-picker .post-bg-swatch { width: 28px !important; height: 28px !important; min-width: 0 !important; }
}

/* 8e. Chat input: the placeholder wrapped to two lines and was cut off. */
textarea[id^="inputMsg_"]::placeholder {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
textarea[id^="inputMsg_"] { text-overflow: ellipsis; }

/* 8f. Friends: one card per screen height (~900px each) wasted the screen.
       Two columns on normal phones; single column only on very small ones. */
@media (min-width: 360px) and (max-width: 560px) {
    .friends-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .friends-grid .friend-card { padding: 12px !important; }
}