/* Ruang Bestari Header
-------------------------------------------------------------- */

.rb-header-actions--desktop {
width: clamp(340px, 38vw, 500px);
max-width: 500px;
}

.rb-header-search--desktop {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 42px;
margin: 0;
padding: 0 14px;
border: 1px solid var(--global-palette7, #E5E7EA);
border-radius: 12px;
background: var(--global-palette8, #F8F9FA);
color: var(--global-palette5, #687078);
box-sizing: border-box;
transition:
border-color 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}

.rb-header-search--desktop:hover {
border-color: var(--global-palette6, #A2A8AE);
}

.rb-header-search--desktop:focus-within {
border-color: var(--global-palette1, #FF751F);
background: var(--global-palette9, #FFFFFF);
box-shadow: 0 0 0 3px rgba(255, 117, 31, 0.12);
}

.rb-header-search__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
font-size: 20px;
line-height: 1;
color: var(--global-palette5, #687078);
}

.rb-header-search--desktop .rb-header-search__input {
display: block;
flex: 1 1 auto;
min-width: 0;
height: 100%;
margin: 0;
padding: 0;
border: 0;
outline: 0;
background: transparent;
box-shadow: none;
color: var(--global-palette3, #191C1F);
font: inherit;
font-size: 15px;
line-height: 1.4;
}

.rb-header-search--desktop .rb-header-search__input:focus {
border: 0;
outline: 0;
background: transparent;
box-shadow: none;
}

.rb-header-search--desktop .rb-header-search__input::placeholder {
color: var(--global-palette5, #687078);
opacity: 1;
}

.rb-header-search--desktop .rb-header-search__input::-webkit-search-cancel-button {
cursor: pointer;
}

/* Menulis button icon */
#main-header .header-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}

#main-header .header-button::before {
content: "";
display: block;
flex: 0 0 18px;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* Dark mode palette
-------------------------------------------------------------- */

html[data-rb-theme="dark"] {
color-scheme: dark;

--global-palette1: #FF751F;
--global-palette2: #FF8A45;
--global-palette3: #F5F6F7;
--global-palette4: #D9DDE1;
--global-palette5: #A8AFB6;
--global-palette6: #747B82;
--global-palette7: #2B3035;
--global-palette8: #181B1E;
--global-palette9: #101214;
--global-palette10: #FfFfFf;
--global-palette11: #45B97C;
--global-palette12: #7EA6FF;
--global-palette13: #F06565;
--global-palette14: #E9AD32;
--global-palette15: #F5A524;
}


/* Desktop theme toggle
-------------------------------------------------------------- */

#main-header [data-section="kadence_customizer_header_button"] {
display: flex;
align-items: center;
gap: 8px;
}

#main-header .rb-theme-toggle--desktop {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
border: 1px solid var(--global-palette7, #E5E7EA);
border-radius: 12px;
background: var(--global-palette9, #FFFFFF);
color: var(--global-palette4, #343A40);
box-shadow: none;
cursor: pointer;
line-height: 1;
transition:
background-color 180ms ease,
border-color 180ms ease,
color 180ms ease;
}

#main-header .rb-theme-toggle--desktop:hover {
border-color: var(--global-palette6, #A2A8AE);
background: var(--global-palette8, #F8F9FA);
color: var(--global-palette3, #191C1F);
}

#main-header .rb-theme-toggle--desktop:focus-visible {
outline: 3px solid rgba(255, 117, 31, 0.18);
outline-offset: 2px;
}

#main-header .rb-theme-toggle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}

#main-header .rb-theme-toggle__icon svg {
display: block;
width: 20px;
height: 20px;
}


/* Theme toggle state
-------------------------------------------------------------- */

#main-header .rb-theme-toggle__sun {
display: none;
}

html[data-rb-theme="dark"] #main-header .rb-theme-toggle__moon {
display: none;
}

html[data-rb-theme="dark"] #main-header .rb-theme-toggle__sun {
display: block;
}


/* Desktop account entry
-------------------------------------------------------------- */

#main-header .rb-header-login--desktop {
display: inline-flex;
align-items: center;
justify-content: center;
height: 42px;
margin: 0;
padding: 0 8px;
color: var(--global-palette4, #4B535A);
font-size: 15px;
font-weight: 600;
line-height: 1;
text-decoration: none;
white-space: nowrap;
transition: color 180ms ease;
}

#main-header .rb-header-login--desktop:hover {
color: var(--global-palette1, #FF751F);
}

#main-header .rb-header-login--desktop:focus-visible,
#main-header .rb-header-account--desktop:focus-visible {
outline: 3px solid rgba(255, 117, 31, 0.18);
outline-offset: 2px;
}

#main-header .rb-header-account--desktop {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 42px;
width: 42px;
height: 42px;
margin: 0;
padding: 0;
border-radius: 50%;
text-decoration: none;
}

#main-header .rb-header-account__avatar {
display: block;
width: 36px;
height: 36px;
margin: 0;
border: 1px solid var(--global-palette7, #E5E7EA);
border-radius: 50%;
object-fit: cover;
}


/* Desktop account dropdown
-------------------------------------------------------------- */

#main-header .rb-header-account-menu {
position: relative;
display: inline-flex;
align-items: center;
}

#main-header .rb-header-account--desktop {
border: 0;
background: transparent;
box-shadow: none;
cursor: pointer;
}

#main-header .rb-header-account-dropdown[hidden] {
display: none !important;
}

#main-header .rb-header-account-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1000;
display: flex;
flex-direction: column;
width: 220px;
padding: 8px;
border: 1px solid var(--global-palette7, #E5E7EA);
border-radius: 14px;
background: var(--global-palette9, #FFFFFF);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
box-sizing: border-box;
}

#main-header .rb-header-account-dropdown__item {
display: flex;
align-items: center;
min-height: 40px;
padding: 8px 12px;
border-radius: 10px;
color: var(--global-palette3, #191C1F);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
box-sizing: border-box;
transition:
background-color 180ms ease,
color 180ms ease;
}

#main-header a.rb-header-account-dropdown__item:hover,
#main-header a.rb-header-account-dropdown__item:focus-visible {
background: var(--global-palette8, #F8F9FA);
color: var(--global-palette1, #FF751F);
outline: none;
}

#main-header .rb-header-account-dropdown__item.is-disabled {
color: var(--global-palette6, #A2A8AE);
cursor: not-allowed;
opacity: 0.7;
}

#main-header .rb-header-account-dropdown__separator {
display: block;
height: 1px;
margin: 6px 4px;
background: var(--global-palette7, #E5E7EA);
}

#main-header .rb-header-account-dropdown__item--logout {
color: var(--global-palette13, #B82105);
}

#main-header .rb-header-account-dropdown__item--logout:hover,
#main-header .rb-header-account-dropdown__item--logout:focus-visible {
color: var(--global-palette13, #B82105);
}


/* Mobile header actions
-------------------------------------------------------------- */

#mobile-header .mobile-html,
#mobile-header .mobile-html-inner {
display: flex;
align-items: center;
margin: 0;
padding: 0;
}

#mobile-header .rb-header-actions--mobile {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 5px;
margin: 0;
padding: 0;
white-space: nowrap;
}

#mobile-header .rb-mobile-header-button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
border: 0;
border-radius: 10px;
background: transparent;
color: var(--global-palette4, #343A40);
box-shadow: none;
text-decoration: none;
cursor: pointer;
line-height: 1;
box-sizing: border-box;
transition:
background-color 180ms ease,
color 180ms ease,
border-color 180ms ease;
}

#mobile-header .rb-mobile-header-button svg {
display: block;
flex: 0 0 20px;
width: 20px;
height: 20px;
}

#mobile-header .rb-mobile-header-button:hover,
#mobile-header .rb-mobile-header-button:focus-visible {
background: var(--global-palette8, #F8F9FA);
color: var(--global-palette3, #191C1F);
}

#mobile-header .rb-mobile-header-button:focus-visible {
outline: 3px solid rgba(255, 117, 31, 0.18);
outline-offset: 1px;
}

#mobile-header .rb-mobile-write {
background: rgba(255, 117, 31, 0.10);
color: var(--global-palette1, #FF751F);
}

#mobile-header .rb-mobile-write:hover,
#mobile-header .rb-mobile-write:focus-visible {
background: rgba(255, 117, 31, 0.16);
color: var(--global-palette2, #E85F0B);
}

#mobile-header .rb-theme-toggle__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
}

#mobile-header .rb-theme-toggle__sun {
display: none;
}

html[data-rb-theme="dark"] #mobile-header .rb-theme-toggle__moon {
display: none;
}

html[data-rb-theme="dark"] #mobile-header .rb-theme-toggle__sun {
display: block;
}

#mobile-header .rb-mobile-account--logged-in {
border-radius: 50%;
}

#mobile-header .rb-mobile-account__avatar {
display: block;
width: 32px;
height: 32px;
margin: 0;
border: 1px solid var(--global-palette7, #E5E7EA);
border-radius: 50%;
object-fit: cover;
}

@media (max-width: 767px) {
#mobile-header .site-container,
#mobile-header .site-header-row-container-inner {
min-height: 64px;
}

#mobile-header .site-header-main-section-left {
min-width: 0;
}

#mobile-header .site-header-main-section-right {
flex: 0 0 auto;
}
}


/* Mobile theme icon visibility fix
-------------------------------------------------------------- */

#mobile-header .rb-theme-toggle__icon .rb-theme-toggle__moon {
display: block !important;
}

#mobile-header .rb-theme-toggle__icon .rb-theme-toggle__sun {
display: none !important;
}

html[data-rb-theme="dark"] #mobile-header .rb-theme-toggle__icon .rb-theme-toggle__moon {
display: none !important;
}

html[data-rb-theme="dark"] #mobile-header .rb-theme-toggle__icon .rb-theme-toggle__sun {
display: block !important;
}


/* Theme icon visibility definitive fix
-------------------------------------------------------------- */

/* Light mode: moon visible, sun hidden */
#main-header .rb-theme-toggle__icon .rb-theme-toggle__moon,
#mobile-header .rb-theme-toggle__icon .rb-theme-toggle__moon {
display: block !important;
}

#main-header .rb-theme-toggle__icon .rb-theme-toggle__sun,
#mobile-header .rb-theme-toggle__icon .rb-theme-toggle__sun {
display: none !important;
}

/* Dark mode: sun visible, moon hidden */
html[data-rb-theme="dark"] #main-header .rb-theme-toggle__icon .rb-theme-toggle__moon,
html[data-rb-theme="dark"] #mobile-header .rb-theme-toggle__icon .rb-theme-toggle__moon {
display: none !important;
}

html[data-rb-theme="dark"] #main-header .rb-theme-toggle__icon .rb-theme-toggle__sun,
html[data-rb-theme="dark"] #mobile-header .rb-theme-toggle__icon .rb-theme-toggle__sun {
display: block !important;
}


/* Mobile expandable search
-------------------------------------------------------------- */

#mobile-header .site-header-row-container-inner {
position: relative;
}

#mobile-header .rb-mobile-search-toggle__close {
display: none;
}

#mobile-header .rb-mobile-search-toggle[aria-expanded="true"] .rb-mobile-search-toggle__search {
display: none;
}

#mobile-header .rb-mobile-search-toggle[aria-expanded="true"] .rb-mobile-search-toggle__close {
display: block;
}

#mobile-header .rb-mobile-search-panel[hidden] {
display: none !important;
}

#mobile-header .rb-mobile-search-panel {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 999;
display: block;
padding: 10px 16px 12px;
border-top: 1px solid var(--global-palette7, #E5E7EA);
border-bottom: 1px solid var(--global-palette7, #E5E7EA);
background: var(--global-palette9, #FFFFFF);
box-sizing: border-box;
}

#mobile-header .rb-mobile-search-form {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
height: 42px;
margin: 0;
padding: 0 14px;
border: 1px solid var(--global-palette7, #E5E7EA);
border-radius: 12px;
background: var(--global-palette8, #F8F9FA);
box-sizing: border-box;
transition:
border-color 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}

#mobile-header .rb-mobile-search-form:focus-within {
border-color: var(--global-palette1, #FF751F);
background: var(--global-palette9, #FFFFFF);
box-shadow: 0 0 0 3px rgba(255, 117, 31, 0.12);
}

#mobile-header .rb-mobile-search-form__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 20px;
width: 20px;
height: 20px;
color: var(--global-palette5, #687078);
}

#mobile-header .rb-mobile-search-form__input {
display: block;
flex: 1 1 auto;
min-width: 0;
height: 100%;
margin: 0;
padding: 0;
border: 0 !important;
outline: 0;
background: transparent !important;
box-shadow: none !important;
color: var(--global-palette3, #191C1F);
font: inherit;
font-size: 15px;
line-height: 1.4;
}

#mobile-header .rb-mobile-search-form__input:focus {
border: 0 !important;
outline: 0;
box-shadow: none !important;
}

#mobile-header .rb-mobile-search-form__input::placeholder {
color: var(--global-palette5, #687078);
opacity: 1;
}


/* Mobile search icon definitive visibility
-------------------------------------------------------------- */

/* Closed: search visible, X hidden */
#mobile-header .rb-mobile-search-toggle .rb-mobile-search-toggle__search {
display: block !important;
}

#mobile-header .rb-mobile-search-toggle .rb-mobile-search-toggle__close {
display: none !important;
}

/* Open: search hidden, X visible */
#mobile-header .rb-mobile-search-toggle[aria-expanded="true"] .rb-mobile-search-toggle__search {
display: none !important;
}

#mobile-header .rb-mobile-search-toggle[aria-expanded="true"] .rb-mobile-search-toggle__close {
display: block !important;
}


/* Mobile account dropdown
-------------------------------------------------------------- */

#mobile-header .rb-mobile-account-menu {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 40px;
width: 40px;
height: 40px;
margin: 0;
padding: 0;
}

#mobile-header .rb-mobile-account-dropdown[hidden] {
display: none !important;
}

#mobile-header .rb-mobile-account-dropdown {
position: absolute;
top: calc(100% + 10px);
right: 0;
z-index: 1200;
display: flex;
flex-direction: column;
width: 220px;
margin: 0;
padding: 8px;
border: 1px solid var(--global-palette7, #E5E7EA);
border-radius: 14px;
background: var(--global-palette9, #FFFFFF);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
box-sizing: border-box;
white-space: normal;
}

#mobile-header .rb-mobile-account-dropdown .rb-header-account-dropdown__item {
display: flex;
align-items: center;
width: 100%;
min-height: 40px;
margin: 0;
padding: 8px 12px;
border-radius: 10px;
color: var(--global-palette3, #191C1F);
font-size: 14px;
font-weight: 600;
line-height: 1.35;
text-align: left;
text-decoration: none;
white-space: nowrap;
box-sizing: border-box;
transition:
background-color 180ms ease,
color 180ms ease;
}

#mobile-header .rb-mobile-account-dropdown a.rb-header-account-dropdown__item:hover,
#mobile-header .rb-mobile-account-dropdown a.rb-header-account-dropdown__item:focus-visible {
background: var(--global-palette8, #F8F9FA);
color: var(--global-palette1, #FF751F);
outline: none;
}

#mobile-header .rb-mobile-account-dropdown .rb-header-account-dropdown__item.is-disabled {
color: var(--global-palette6, #A2A8AE);
opacity: 0.7;
cursor: not-allowed;
}

#mobile-header .rb-mobile-account-dropdown .rb-header-account-dropdown__separator {
display: block;
width: auto;
height: 1px;
margin: 6px 4px;
background: var(--global-palette7, #E5E7EA);
}

#mobile-header .rb-mobile-account-dropdown .rb-header-account-dropdown__item--logout {
color: var(--global-palette13, #B82105);
}

#mobile-header .rb-mobile-account-dropdown .rb-header-account-dropdown__item--logout:hover,
#mobile-header .rb-mobile-account-dropdown .rb-header-account-dropdown__item--logout:focus-visible {
color: var(--global-palette13, #B82105);
}


/* Sticky header scrolled state
-------------------------------------------------------------- */

#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
background: rgba(255, 255, 255, 0.95);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}

html[data-rb-theme="dark"] #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) {
background: rgba(24, 27, 30, 0.95);
border-bottom-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
}

/* Keep sticky header dimensions unchanged while scrolling. */
#main-header .kadence-sticky-header.item-is-fixed,
#mobile-header .kadence-sticky-header.item-is-fixed {
transform: none;
}


/* Dark header background layer fix
-------------------------------------------------------------- */

/* Normal dark header */
html[data-rb-theme="dark"] #masthead .site-main-header-wrap .site-header-row-container-inner {
background: #181B1E;
}

/* Dark header while sticky/scrolled */
html[data-rb-theme="dark"] #masthead .site-main-header-wrap.kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner {
background: rgba(24, 27, 30, 0.95);
border-bottom-color: rgba(255, 255, 255, 0.08);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}


/* Dark mode logo
-------------------------------------------------------------- */

/*
 * Light mode keeps Kadence's regular custom logo.
 * Dark mode swaps only the image source while preserving
 * the exact same dimensions and layout.
 */
html[data-rb-theme="dark"] #masthead img.custom-logo {
content: url("/wp-content/uploads/2026/08/Bestari-Literasi-Indonesia.png");
}


/* Orange glow header divider
-------------------------------------------------------------- */

#masthead .site-main-header-wrap .site-header-row-container-inner {
position: relative;
border-bottom: 0 !important;
}

#masthead .site-main-header-wrap .site-header-row-container-inner::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 20;
display: block;
height: 1px;
background: rgba(255, 117, 31, 0.48);
box-shadow:
0 0 4px rgba(255, 117, 31, 0.16),
0 0 8px rgba(255, 117, 31, 0.06);
pointer-events: none;
}

/* Slightly stronger glow in dark mode. */
html[data-rb-theme="dark"] #masthead .site-main-header-wrap .site-header-row-container-inner::after {
background: rgba(255, 117, 31, 0.72);
box-shadow:
0 0 5px rgba(255, 117, 31, 0.30),
0 0 10px rgba(255, 117, 31, 0.10);
}


/* Unified soft-orange header action tiles
-------------------------------------------------------------- */

/* Desktop theme toggle */
#main-header .rb-theme-toggle--desktop {
border-color: rgba(255, 117, 31, 0.14);
background: rgba(255, 117, 31, 0.09);
color: var(--global-palette1, #FF751F);
}

#main-header .rb-theme-toggle--desktop:hover,
#main-header .rb-theme-toggle--desktop:focus-visible {
border-color: rgba(255, 117, 31, 0.22);
background: rgba(255, 117, 31, 0.16);
color: var(--global-palette1, #FF751F);
}

/* Desktop logged-in avatar tile */
#main-header .rb-header-account--desktop {
border: 1px solid rgba(255, 117, 31, 0.14);
border-radius: 12px;
background: rgba(255, 117, 31, 0.09);
transition:
background-color 180ms ease,
border-color 180ms ease;
}

#main-header .rb-header-account--desktop:hover,
#main-header .rb-header-account--desktop:focus-visible {
border-color: rgba(255, 117, 31, 0.22);
background: rgba(255, 117, 31, 0.16);
}

/* Keep the user photo circular inside the square tile. */
#main-header .rb-header-account__avatar {
width: 32px;
height: 32px;
}


/* Mobile: one visual family for all four actions */
#mobile-header .rb-mobile-header-button {
border: 1px solid rgba(255, 117, 31, 0.12);
border-radius: 10px;
background: rgba(255, 117, 31, 0.09);
color: var(--global-palette1, #FF751F);
}

#mobile-header .rb-mobile-header-button:hover,
#mobile-header .rb-mobile-header-button:focus-visible {
border-color: rgba(255, 117, 31, 0.20);
background: rgba(255, 117, 31, 0.16);
color: var(--global-palette1, #FF751F);
}

/* Menulis remains slightly more prominent. */
#mobile-header .rb-mobile-write {
border-color: rgba(255, 117, 31, 0.16);
background: rgba(255, 117, 31, 0.12);
color: var(--global-palette1, #FF751F);
}

#mobile-header .rb-mobile-write:hover,
#mobile-header .rb-mobile-write:focus-visible {
background: rgba(255, 117, 31, 0.18);
color: var(--global-palette1, #FF751F);
}

/* Logged-in avatar uses the same rounded tile, photo stays circular. */
#mobile-header .rb-mobile-account--logged-in {
border-radius: 10px;
}

#mobile-header .rb-mobile-account__avatar {
width: 30px;
height: 30px;
border-radius: 50%;
}


/* Dark mode: preserve the orange treatment against dark surfaces. */
html[data-rb-theme="dark"] #main-header .rb-theme-toggle--desktop,
html[data-rb-theme="dark"] #main-header .rb-header-account--desktop,
html[data-rb-theme="dark"] #mobile-header .rb-mobile-header-button {
border-color: rgba(255, 117, 31, 0.22);
background: rgba(255, 117, 31, 0.13);
color: #FF751F;
}

html[data-rb-theme="dark"] #main-header .rb-theme-toggle--desktop:hover,
html[data-rb-theme="dark"] #main-header .rb-header-account--desktop:hover,
html[data-rb-theme="dark"] #mobile-header .rb-mobile-header-button:hover {
background: rgba(255, 117, 31, 0.20);
}


/* Refined header action hierarchy
-------------------------------------------------------------- */

/*
 * Secondary actions stay neutral.
 * Orange is reserved for Menulis and interactive/active states.
 */

/* DESKTOP: theme */
#main-header .rb-theme-toggle--desktop {
border-color: var(--global-palette7, #E5E7EA);
background: var(--global-palette8, #F8F9FA);
color: var(--global-palette4, #343A40);
}

#main-header .rb-theme-toggle--desktop:hover,
#main-header .rb-theme-toggle--desktop:focus-visible {
border-color: rgba(255, 117, 31, 0.22);
background: rgba(255, 117, 31, 0.10);
color: var(--global-palette1, #FF751F);
}

/* DESKTOP: logged-in account */
#main-header .rb-header-account--desktop {
border-color: var(--global-palette7, #E5E7EA);
background: var(--global-palette8, #F8F9FA);
}

#main-header .rb-header-account--desktop:hover,
#main-header .rb-header-account--desktop:focus-visible,
#main-header .rb-header-account--desktop[aria-expanded="true"] {
border-color: rgba(255, 117, 31, 0.22);
background: rgba(255, 117, 31, 0.10);
}


/* MOBILE: secondary actions */
#mobile-header .rb-mobile-search-toggle,
#mobile-header .rb-theme-toggle--mobile,
#mobile-header .rb-mobile-account {
border-color: var(--global-palette7, #E5E7EA);
background: var(--global-palette8, #F8F9FA);
color: var(--global-palette4, #343A40);
}

/* MOBILE: hover/focus */
#mobile-header .rb-mobile-search-toggle:hover,
#mobile-header .rb-mobile-search-toggle:focus-visible,
#mobile-header .rb-theme-toggle--mobile:hover,
#mobile-header .rb-theme-toggle--mobile:focus-visible,
#mobile-header .rb-mobile-account:hover,
#mobile-header .rb-mobile-account:focus-visible {
border-color: rgba(255, 117, 31, 0.22);
background: rgba(255, 117, 31, 0.10);
color: var(--global-palette1, #FF751F);
}

/* MOBILE: open Search and Account become orange-active */
#mobile-header .rb-mobile-search-toggle[aria-expanded="true"],
#mobile-header .rb-mobile-account[aria-expanded="true"] {
border-color: rgba(255, 117, 31, 0.24);
background: rgba(255, 117, 31, 0.12);
color: var(--global-palette1, #FF751F);
}

/* Menulis remains the primary action */
#mobile-header .rb-mobile-write {
border-color: rgba(255, 117, 31, 0.16);
background: rgba(255, 117, 31, 0.12);
color: var(--global-palette1, #FF751F);
}

#mobile-header .rb-mobile-write:hover,
#mobile-header .rb-mobile-write:focus-visible {
border-color: rgba(255, 117, 31, 0.24);
background: rgba(255, 117, 31, 0.18);
color: var(--global-palette1, #FF751F);
}


/* DARK MODE: neutral secondary tiles */
html[data-rb-theme="dark"] #main-header .rb-theme-toggle--desktop,
html[data-rb-theme="dark"] #main-header .rb-header-account--desktop,
html[data-rb-theme="dark"] #mobile-header .rb-mobile-search-toggle,
html[data-rb-theme="dark"] #mobile-header .rb-theme-toggle--mobile,
html[data-rb-theme="dark"] #mobile-header .rb-mobile-account {
border-color: rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.05);
color: #D9DDE1;
}

/* DARK MODE: interactive/active states */
html[data-rb-theme="dark"] #main-header .rb-theme-toggle--desktop:hover,
html[data-rb-theme="dark"] #main-header .rb-theme-toggle--desktop:focus-visible,
html[data-rb-theme="dark"] #main-header .rb-header-account--desktop:hover,
html[data-rb-theme="dark"] #main-header .rb-header-account--desktop:focus-visible,
html[data-rb-theme="dark"] #main-header .rb-header-account--desktop[aria-expanded="true"],
html[data-rb-theme="dark"] #mobile-header .rb-mobile-search-toggle:hover,
html[data-rb-theme="dark"] #mobile-header .rb-mobile-search-toggle:focus-visible,
html[data-rb-theme="dark"] #mobile-header .rb-mobile-search-toggle[aria-expanded="true"],
html[data-rb-theme="dark"] #mobile-header .rb-theme-toggle--mobile:hover,
html[data-rb-theme="dark"] #mobile-header .rb-theme-toggle--mobile:focus-visible,
html[data-rb-theme="dark"] #mobile-header .rb-mobile-account:hover,
html[data-rb-theme="dark"] #mobile-header .rb-mobile-account:focus-visible,
html[data-rb-theme="dark"] #mobile-header .rb-mobile-account[aria-expanded="true"] {
border-color: rgba(255, 117, 31, 0.28);
background: rgba(255, 117, 31, 0.14);
color: #FF751F;
}

/* Dark Menulis remains orange */
html[data-rb-theme="dark"] #mobile-header .rb-mobile-write {
border-color: rgba(255, 117, 31, 0.24);
background: rgba(255, 117, 31, 0.14);
color: #FF751F;
}


/* Desktop header proportions
-------------------------------------------------------------- */
@media (min-width: 1025px) {
#masthead .site-branding img.custom-logo {
width: 198px;
max-width: 198px;
height: auto;
}
}

/* ==========================================================
   RB HEADER — AVATAR FILL FRAME
   ========================================================== */

/* Wrapper avatar */
#main-header .rb-header-account__avatar,
#mobile-header .rb-header-account__avatar {
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #eef1f2 !important;
}

/* Gambar avatar harus penuh mengisi frame */
#main-header .rb-header-account__avatar img,
#mobile-header .rb-header-account__avatar img,
#main-header .rb-header-account__avatar picture img,
#mobile-header .rb-header-account__avatar picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: inherit !important;
}

/* Kalau avatar berupa link/button, pastikan isinya ikut penuh */
#main-header .rb-header-account--desktop,
#mobile-header .rb-header-account--mobile {
    overflow: hidden !important;
}


/* ==========================================================
   RB HEADER — AVATAR FILL FRAME
   ========================================================== */

/* Wrapper avatar */
#main-header .rb-header-account__avatar,
#mobile-header .rb-header-account__avatar {
    overflow: hidden !important;
    border-radius: 12px !important;
    background: #eef1f2 !important;
}

/* Gambar avatar harus penuh mengisi frame */
#main-header .rb-header-account__avatar img,
#mobile-header .rb-header-account__avatar img,
#main-header .rb-header-account__avatar picture img,
#mobile-header .rb-header-account__avatar picture img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: inherit !important;
}

/* Kalau avatar berupa link/button, pastikan isinya ikut penuh */
#main-header .rb-header-account--desktop,
#mobile-header .rb-header-account--mobile {
    overflow: hidden !important;
}


/* ==========================================================
   RB HEADER — MOBILE LOGGED-IN AVATAR FINAL
   Photo fills the account tile.
   ========================================================== */

#mobile-header .rb-mobile-account--logged-in {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
}

#mobile-header
.rb-mobile-account--logged-in
.rb-mobile-account__avatar {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: inherit !important;

    object-fit: cover !important;
    object-position: center !important;
}

/* END RB HEADER — MOBILE LOGGED-IN AVATAR FINAL */


/* ==========================================================
   RB HEADER — DESKTOP LOGGED-IN AVATAR FINAL
   Photo fills the 42px account tile.
   ========================================================== */

#main-header .rb-header-account--desktop {
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 12px !important;
}

#main-header
.rb-header-account--desktop
.rb-header-account__avatar {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: inherit !important;

    object-fit: cover !important;
    object-position: center !important;
}

/* END RB HEADER — DESKTOP LOGGED-IN AVATAR FINAL */

/* ==========================================================
   RB HEADER — DESKTOP AVATAR FULL FRAME HARD LOCK
   ========================================================== */

#main-header button.rb-header-account--desktop {
    position: relative !important;

    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;

    padding: 0 !important;

    overflow: hidden !important;

    border-radius: 12px !important;
}

#main-header
button.rb-header-account--desktop
> img.rb-header-account__avatar {
    position: absolute !important;

    inset: 0 !important;

    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: none !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: inherit !important;

    object-fit: cover !important;
    object-position: center !important;

    transform: none !important;
}

/* END RB HEADER — DESKTOP AVATAR FULL FRAME HARD LOCK */

/* ==========================================================
 * RB DESKTOP — STABLE AUTH HEADER VIEWPORT
 * Keep header alignment identical whether scrollbar exists.
 * ========================================================== */

@media (min-width: 901px) {

    html:has(body.rb-auth-login),
    html:has(body.rb-auth-register),
    html:has(body.rb-auth-password-reset),
    html:has(body.rb-start-writing-page) {
        scrollbar-gutter: stable !important;
    }

}

/* END RB DESKTOP — STABLE AUTH HEADER VIEWPORT */