/* Wari Family: native EasySocial and EasyDiscuss surfaces. */
#es, #ed { --family-ink:#173f49; --family-teal:#367b79; --family-gold:#d8a244; --family-line:#e3e9e3; --family-soft:#f5f7f2; color:var(--family-ink); font-family:inherit; line-height:1.55; }
#es *, #ed * { box-sizing:border-box; }
#es .es-content, #ed .ed-main-content, #es .es-container { min-width:0; }
#es a, #ed a { color:#276764; }
#es a:hover, #ed a:hover { color:#173f49; }
#es .btn-es-primary, #es .btn-es-primary-o, #ed .o-btn--primary, #ed .o-btn--primary-o { background:#173f49; border-color:#173f49; color:#fff; border-radius:10px; }
#es .btn-es-primary:hover, #es .btn-es-primary-o:hover, #ed .o-btn--primary:hover, #ed .o-btn--primary-o:hover { background:#2b676a; border-color:#2b676a; color:#fff; }
#es .es-stream, #es .es-story, #es .es-card, #es .es-panel, #ed .o-card { border:1px solid var(--family-line); border-radius:15px; background:#fff; box-shadow:0 3px 14px rgba(23,63,73,.035); }
#es .es-stream + .es-stream { margin-top:18px; }
#es input[type=text], #es input[type=password], #es input[type=email], #ed input[type=text], #es .o-form-control, #ed .o-form-control { border-color:#d7e1d9; border-radius:10px; color:#173f49; background:#fff; }
#es input:focus, #ed input:focus, #es textarea:focus, #ed textarea:focus { outline:2px solid rgba(54,123,121,.2); outline-offset:1px; border-color:#367b79; }
#es .es-toolbar, #ed .ed-toolbar { border-radius:12px; }
#es .es-toolbar { background:#173f49; border-color:#173f49; }
#es .es-toolbar a, #es .es-toolbar .fa { color:#fff; }
#es .es-toolbar .dropdown-menu a { color:#173f49; }
#es .wari-family-login { width:100%; max-width:none; margin:0; padding:0; background:transparent; border:0; border-radius:0; box-shadow:none; }
#es .wari-family-login__form { width:100%; max-width:none; margin:0; padding:0; background:transparent; border:0; box-shadow:none; }
#es .wari-family-login .es-login-box__form-title { color:#173f49; font-family:Georgia,serif; font-size:29px; font-weight:normal; line-height:1.2; }
#es .wari-family-login .o-form-control { min-height:48px; }
#es .wari-family-login .o-grid-sm { display:flex; flex-direction:column; gap:16px; align-items:stretch; }
#es .wari-family-login .o-grid-sm__cell { width:100%; flex:auto; }
#es .wari-family-login .o-grid-sm__cell--right button { width:100%; display:flex; align-items:center; justify-content:center; gap:7px; }
#es .wari-family-login .o-checkbox label { font-size:12px; }
#es .wari-family-login .btn { min-height:42px; padding:10px 18px; }
#es .wari-family-login .es-login-social-container { gap:8px; }
#ed .wari-discussions-heading { margin:0 0 26px; padding:28px 30px; background:#f3f7f0; border:1px solid #e3e9e3; border-radius:18px; }
#ed .wari-discussions-heading h1 { margin:6px 0 10px; color:#173f49; font:normal clamp(27px,3vw,38px)/1.15 Georgia,serif; }
#ed .wari-discussions-heading p { max-width:650px; margin:0; color:#60716a; }
#ed .wari-community-eyebrow { color:#617d66; font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
@media(max-width:767px) {
 #es .wari-family-login { padding:0; border-radius:0; }
 #es .wari-family-login .es-login-box__form-title { font-size:26px; }
 #ed .wari-discussions-heading { padding:22px 20px; }
 #es .es-content-wrap, #es .es-content, #ed .ed-main-content { min-width:0; max-width:100%; }
}

/* Native utility controls complement the family sidebar. */
#ed .wari-conversation-start { display:inline-flex; margin-top:20px; padding:11px 18px; text-decoration:none; }

#es .wari-list-actions { display:flex; justify-content:flex-end; margin:0 0 18px; }
#es .wari-list-actions .btn { padding:11px 18px; }

/* Comfortable native forms and controls in the family shell. */
#es .wari-login-field { display:grid; gap:8px; margin:0 0 18px; }
#es .wari-login-field > label { color:#365b60; font-size:14px; font-weight:600; line-height:1.45; }
.wf-guest .wf-auth-component #es .wari-family-login input.o-form-control,
.wf-guest .wf-auth-component #es .es-account-form input.o-form-control { font-size:16px!important; line-height:1.5; min-height:52px; padding:12px 14px; }
#es .wari-family-login .o-checkbox { min-height:44px; display:flex; align-items:center; }
#es .wari-family-login .o-checkbox label { display:flex; align-items:center; min-height:44px; padding-block:8px; font-size:14px; line-height:1.5; }
#es .wari-family-login .o-checkbox label::before,
#es .wari-family-login .o-checkbox label::after { top:50%; transform:translateY(-50%); }
#es .wari-family-login .o-grid-sm { gap:12px; }
#es .wari-family-login .btn { min-height:48px; font-size:16px; line-height:1.5; }
#es .wari-login-recovery { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 6px; margin-bottom:0; }
#es .wari-login-recovery a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 4px; font-size:14px; line-height:1.45; text-align:center; }
#es .wari-login-recovery__separator { color:#a0afa1; }

/* Match native component accents; EasySocial's theme declares primary colors important. */
.wf-component #es .btn-es-primary,
.wf-component #es .btn-es-primary-o,
.wf-component #es .es-story-privacy .es-privacy-toggle { color:#fff!important; background-color:#1c5360!important; border-color:#1c5360!important; }
.wf-component #es .btn-es-primary:hover,
.wf-component #es .btn-es-primary-o:hover { background-color:#163f48!important; border-color:#163f48!important; }
.wf-component #es .o-empty,
.wf-component #ed .o-empty { border:1px solid #e0e7df; border-radius:16px; background:#fff; padding:32px 22px; }
.wf-component #es .o-empty__text { color:#61746d; font-size:15px; line-height:1.65; }
.wf-component #es .o-empty__icon { color:#819480; }
.wf-component #es .es-snackbar2 { border:1px solid #e0e7df; border-radius:12px; background:#edf3eb; padding:12px 14px; gap:12px; }
.wf-component #es .es-snackbar2__title { font-size:15px; font-weight:600; color:#365b60; }
.wf-component #es .es-cat-header { border:1px solid #e0e7df; border-radius:15px; background:#fff; }
.wf-component #es .es-cat-header__title-link { font-size:16px; line-height:1.5; }
.wf-component #es .es-cat-header__desc { font-size:14px; line-height:1.6; color:#61746d; }
.wf-component #es .wari-list-actions .btn { font-size:14px; font-weight:600; }
.wf-component #ed .ed-attachment-dropzone { border-color:#d3dfd1; background:#f5f8f1; }
.wf-component #ed .ed-attachment-dropzone__surface { border-color:#b5cbb6; background:#f5f8f1; }
.wf-component #ed .ed-attachment-dropzone__icon { color:#367b79; background:#e5eee2; }
.wf-component #ed .ed-attachment-dropzone__fact { border-color:#dce6d9; background:#fff; color:#61746d; }
.wf-component #ed .ed-attachment-dropzone__fact i { color:#367b79; }
.wf-component #ed .ed-attachment-dropzone__note { color:#61746d; font-size:14px; line-height:1.6; }
.wf-component #ed .ed-ask .o-tabs__item.active > .o-tabs__link { color:#1c5360; border-color:#367b79; }

@media (max-width:1024px) {
 /* Scope to the component's page; extension dialogs keep their native layouts. */
 .wf-component #es .btn,
 .wf-component #es .btn-popdown,
 .wf-component #ed .o-btn { min-width:44px; min-height:44px; height:auto; font-size:14px; line-height:1.45; padding:11px 14px; }
 .wf-component #es .wari-family-tools .fd-toolbar__link { min-width:44px; min-height:44px; }
 .wf-component #ed .wari-family-tools .fd-toolbar__link { min-width:44px; min-height:44px; }
 .wf-component #es input.o-form-control:not([type=file]),
 .wf-component #es select.o-form-control,
 .wf-component #es textarea.o-form-control,
 .wf-component #es .es-story-textfield,
 .wf-component #es .es-story-link-input,
 .wf-component #ed input.o-form-control,
 .wf-component #ed textarea.o-form-control,
 .wf-component #ed select.o-form-select { font-size:16px; line-height:1.5; }
 .wf-component #es input.o-form-control:not([type=file]),
 .wf-component #es select.o-form-control,
 .wf-component #es .es-story-link-input,
 .wf-component #ed input.o-form-control,
 .wf-component #ed select.o-form-select { min-height:46px; height:auto; padding:10px 12px; }
 .wf-component #es .es-story-textfield { min-height:44px; }
 .wf-component #es .es-story.is-expanded .es-story-textfield { min-height:88px; }
 .wf-component #es .es-story-avatar-popbox-toggle,
 .wf-component #es .es-story-reset__link { min-height:44px; }
 .wf-component #es .es-story-reset__link { min-width:44px; }
 .wf-component #es .es-story-link-form { min-width:0; }
 .wf-component #es .es-story-link-input { max-width:100%; }
 .wf-component #es .es-snackbar2 { flex-wrap:wrap; }
 .wf-component #es .es-snackbar2__actions { max-width:100%; }
 .wf-component #es .btn-popdown { max-width:100%; white-space:normal; text-align:start; }
 .wf-component #es .dropdown-menu--popdown > li > a { min-height:44px; padding-block:12px; font-size:14px; }
 .wf-component #ed .ed-ask .o-tabs__link { min-height:44px; font-size:14px; line-height:1.5; }
 .wf-component #ed .ed-ask__input-title { font-size:16px; }
 .wf-component #ed .ed-ask .o-form-check-label { min-height:44px; font-size:14px; line-height:1.55; padding-block:4px; }
 .wf-component #ed .ed-editor__ft > div { display:flex; flex-wrap:wrap; justify-content:flex-end; align-items:center; gap:8px 12px; }
 .wf-component #ed .ed-editor__ft .si-link { display:inline-flex; align-items:center; min-height:44px; margin:0; padding-block:10px; }
 .wf-component #ed .markItUpHeader > ul { display:flex; flex-wrap:wrap; gap:4px; }
 .wf-component #ed .markItUpHeader > ul > li { float:none; margin:0; }
 .wf-component #ed .markItUpHeader > ul > li > a { min-width:44px; min-height:44px; width:44px; height:44px; line-height:44px; background-position:center; border-radius:8px; }
 .wf-component #ed .markItUpHeader .markItUpSeparator { margin-inline:3px; align-self:center; }
 .wf-component #ed .ed-attachment-dropzone__browse { min-height:44px; }
}
@media (max-width:480px) {
 .wf-component #es .es-snackbar2__actions { width:100%; margin-inline-start:0; }
 .wf-component #es .es-snackbar2__title { min-width:0; }
 .wf-component #es .es-cat-header__hd-content-wrap { min-width:0; }
 .wf-component #ed .wari-discussions-heading { padding:22px 20px; }
 .wf-component #ed .wari-discussions-heading h1 { font-size:27px; line-height:1.22; }
 .wf-component #ed .wari-conversation-start { width:100%; justify-content:center; white-space:normal; text-align:center; }
 .wf-component #ed .ed-editor__ft > div { width:100%; }
 .wf-component #ed .ed-editor__ft [data-ed-submit-button] { flex:1 0 100%; white-space:normal; }
 .wf-component #ed .ed-editor__ft .si-link { margin-inline-start:auto; margin-inline-end:auto; }
 #es .wari-login-recovery { gap:0; }
 #es .wari-login-recovery a { padding-inline:6px; }
 #es .wari-login-recovery__separator { display:none; }
}

/* The guest form sits outside the member component wrapper. */
.wf-guest .wf-auth-component #es .wari-family-login [data-login-submit] {
 min-height:48px; color:#fff!important; background:#1c5360!important; border:1px solid #1c5360!important;
 border-radius:10px; font-size:16px; font-weight:600; line-height:1.5;
}
.wf-guest .wf-auth-component #es .wari-family-login [data-login-submit]:hover { background:#163f48!important; border-color:#163f48!important; }

#es .wari-family-login .wari-login-fields { min-width:0; border:0; margin:0; padding:0; }
@media (max-width:1024px) {
 /* Native expanding editors carry more specific inherited font rules. */
 .wf-component #es textarea.es-story-textfield,
 .wf-component #ed textarea.markItUpEditor { font-size:16px!important; line-height:1.5!important; }
 .wf-component #ed .markItUpHeader > ul > li > a { background-repeat:no-repeat!important; }
}
@media (max-width:600px) {
 .wf-component #es .es-stream-filter-bar { display:flex; flex-wrap:wrap; gap:10px; padding:12px; border:1px solid #e0e7df; border-radius:12px; background:#edf3eb; }
 .wf-component #es .es-stream-filter-bar__cell { min-width:0; max-width:100%; flex:1 1 125px; margin:0; }
 .wf-component #es .es-stream-filter-bar__cell > .dropdown_ { width:100%; }
 .wf-component #es .es-stream-filter-bar__cell .btn { width:100%; white-space:normal; }
 .wf-component #es .es-stream-filter-bar__cell > span { display:block; margin:0 0 6px; font-size:14px; }
 .wf-component #es .es-story-header { align-items:flex-start; min-width:0; }
 .wf-component #es .es-story-panel-buttons { min-width:0; max-width:100%; flex:1 1 auto; flex-wrap:wrap; gap:4px; }
 .wf-component #es .es-story-header .es-story-panel-button { min-width:44px; min-height:44px; margin:0; }
 .wf-component #es .es-story-header .es-story-panel-button--label { flex-basis:100%; }
 .wf-component #es .es-story-header .es-story-panel-button__shape { width:40px; height:40px; display:flex; align-items:center; justify-content:center; }
 .wf-component #es .es-story-reset { flex:0 0 44px; }
 .wf-component #es .es-story-avatar-popbox-toggle { display:flex; align-items:center; width:fit-content; max-width:100%; }
}
@media (max-width:600px) {
 /* The timeline caption otherwise consumes the first filter's width on phones. */
 .wf-component #es .es-stream-filter-bar .o-media { display:block; }
 .wf-component #es .es-stream-filter-bar .o-media__image { display:none; }
 .wf-component #es .es-stream-filter-bar .o-media__body { display:block; min-width:0; width:100%; }
 .wf-component #es .es-stream-filter-bar .o-btn-group { display:block; width:100%; }
 .wf-component #es .es-stream-filter-bar__cell .btn { display:flex; justify-content:center; align-items:center; gap:5px; padding-inline:8px; }
 .wf-component #es .es-stream-filter-bar [data-active-filter-text] { min-width:0; white-space:normal; }
 .wf-component #es .es-story-header .es-story-panel-button__shape { background-color:#edf3eb!important; color:#41695e!important; border:1px solid #dce5d8; border-radius:8px; }
 .wf-component #es .es-story-header .es-story-panel-button.active .es-story-panel-button__shape,
 .wf-component #es .es-story-header .es-story-panel-button.is-active .es-story-panel-button__shape { background-color:#1c5360!important; color:#fff!important; }
}
@media (max-width:1024px) {
 .wf-component .wari-family-tools .fd-toolbar__link { min-width:44px; min-height:44px; }
 .wf-component #es .es-cat-header__title-link { display:inline-flex; align-items:center; min-height:44px; }
}
/* Recovery forms share the same comfortable native authentication inputs. */
.wf-guest .wf-auth-component #es form input.o-form-control:not([type=hidden]) { font-size:16px!important; line-height:1.5; min-height:48px; padding:11px 14px; }
.wf-guest .wf-auth-component #es form .btn { min-height:48px; font-size:16px; }
.wf-guest .wf-auth-component #es form .btn-es-primary,
.wf-guest .wf-auth-component #es form .btn-es-primary-o { background:#1c5360!important; border-color:#1c5360!important; color:#fff!important; }

/* StackIdeas notifications and search stay available above every community page. */
.wf-member .wf-component #fd.wari-family-tools .fd-toolbar { background:#fff; border:1px solid #dee7e2; border-radius:14px; padding:6px 10px; min-height:58px; }
.wf-member .wf-component .wari-family-tools { margin:0 0 20px; }
.wf-member .wf-component .wari-family-tools .fd-toolbar__link { min-width:44px; min-height:44px; border-radius:9px; }
.wf-member .wf-component .wari-family-tools .fd-toolbar__link:hover { background:#edf4ef; }
.wf-member .wf-component #fd.wari-family-tools .fd-toolbar__search-input { min-height:44px; font-size:16px; color:#25424a; }
@media(min-width:901px) {
 .wf-member .wf-component #fd.wari-family-tools .fd-toolbar__item--submenu:not(:has(a,button)) { display:none; }
 .wf-member .wf-component #fd.wari-family-tools .fd-toolbar__item--search { display:flex; position:static; flex:1 1 auto; width:auto; max-width:560px; order:0; padding-inline-end:16px; }
 .wf-member .wf-component #fd.wari-family-tools .fd-toolbar__search { width:100%; }
 .wf-member .wf-component #fd.wari-family-tools .fd-toolbar__search-form { min-height:44px; background:#f4f8f5; border:1px solid #e2eae4; border-radius:9px; }
 .wf-member .wf-component #fd.wari-family-tools .fd-toolbar__search-close-btn,
 .wf-member .wf-component #fd.wari-family-tools .fd-toolbar__o-nav-item:has(>[data-fd-toolbar-search-link]) { display:none; }
 .wf-member .wf-component #fd.wari-family-tools .fd-toolbar--search-on .fd-toolbar__item--action { visibility:visible; }
}
@media(max-width:600px) {
 .wf-member .wf-component .wari-family-tools { margin-bottom:16px; }
 .wf-member .wf-component #fd.wari-family-tools .fd-toolbar { padding-inline:4px; }
}
