.oneupheart-faq-shell.section-band {
width: 100%;
padding-top: clamp(22px, 3vw, 36px);
padding-bottom: clamp(30px, 4vw, 48px);
}
.oneupheart-faq-search {
margin-bottom: 18px;
padding: clamp(14px, 2vw, 18px);
background: var(--color-panel);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--panel-outline);
}
.oneupheart-faq-search-control {
display: flex;
min-width: 0;
min-height: 48px;
overflow: hidden;
background: var(--color-bg-soft);
border: 1px solid var(--color-border-strong);
border-radius: calc(var(--radius) - 2px);
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.oneupheart-faq-search-control:focus-within {
border-color: var(--color-gold);
box-shadow: 0 0 0 3px rgba(244, 184, 76, 0.14);
}
.oneupheart-faq-search-input {
width: 100%;
min-width: 0;
padding: 11px 14px;
background: transparent;
border: 0;
color: var(--color-text);
outline: 0;
}
.oneupheart-faq-search-input::placeholder {
color: var(--color-faint);
opacity: 1;
}
.oneupheart-faq-search-input::-webkit-search-cancel-button {
display: none;
}
.oneupheart-faq-clear {
flex: 0 0 auto;
min-width: 74px;
padding: 9px 14px;
background: var(--color-panel-strong);
border: 0;
border-left: 1px solid var(--color-border);
color: var(--color-muted);
cursor: pointer;
font-weight: 800;
letter-spacing: 0;
transition: background-color 160ms ease, color 160ms ease;
}
.oneupheart-faq-clear:hover,
.oneupheart-faq-clear:focus-visible {
background: var(--color-heart);
color: var(--color-on-accent);
}
.oneupheart-faq-status {
min-height: 1.4em;
margin: 9px 2px 0;
color: var(--color-muted);
font-size: 0.84rem;
font-weight: 700;
}
.oneupheart-faq-content.entry-content {
margin-bottom: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.oneupheart-faq-content > p,
.oneupheart-faq-content > ul,
.oneupheart-faq-content > ol {
max-width: 900px;
}
.oneupheart-faq-section {
width: 100%;
margin: 0 0 clamp(24px, 3vw, 34px);
}
.oneupheart-faq-section:last-child {
margin-bottom: 0;
}
.oneupheart-faq-section > h2,
.oneupheart-faq-section > .wp-block-heading:first-child {
margin: 0 0 12px;
padding: 0 0 10px;
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
line-height: 1.25;
}
.oneupheart-faq-content details.wp-block-details,
.oneupheart-faq-content details.oneupheart-faq-item {
margin: 0 0 10px;
overflow: hidden;
background: var(--color-panel);
border: 1px solid var(--color-border);
border-radius: var(--radius);
box-shadow: var(--panel-outline);
color: var(--color-text);
}
.oneupheart-faq-content details.wp-block-details:hover,
.oneupheart-faq-content details.oneupheart-faq-item:hover,
.oneupheart-faq-content details.wp-block-details:focus-within,
.oneupheart-faq-content details.oneupheart-faq-item:focus-within {
border-color: var(--color-border-strong);
}
.oneupheart-faq-content details > summary {
position: relative;
display: block;
min-height: 58px;
padding: 16px 54px 16px 18px;
color: var(--color-text);
cursor: pointer;
font-size: 1rem;
font-weight: 900;
line-height: 1.45;
list-style: none;
letter-spacing: 0;
transition: background-color 160ms ease, color 160ms ease;
}
.oneupheart-faq-content details > summary::-webkit-details-marker {
display: none;
}
.oneupheart-faq-content details > summary::marker {
content: "";
}
.oneupheart-faq-content details > summary::after {
position: absolute;
top: 50%;
right: 20px;
width: 10px;
height: 10px;
border-right: 2px solid var(--color-green);
border-bottom: 2px solid var(--color-green);
content: "";
transform: translateY(-68%) rotate(45deg);
transition: transform 160ms ease, border-color 160ms ease;
}
.oneupheart-faq-content details > summary:hover {
background: var(--color-panel-strong);
color: var(--color-gold);
}
.oneupheart-faq-content details > summary:focus-visible {
outline-offset: -4px;
}
.oneupheart-faq-content details[open] > summary {
background: var(--color-panel-strong);
border-bottom: 1px solid var(--color-border);
}
.oneupheart-faq-content details[open] > summary::after {
border-color: var(--color-gold);
transform: translateY(-30%) rotate(225deg);
}
.oneupheart-faq-content details > :not(summary) {
margin-right: 18px;
margin-left: 18px;
}
.oneupheart-faq-content details > summary + * {
margin-top: 16px;
}
.oneupheart-faq-content details > :last-child:not(summary) {
margin-bottom: 18px;
}
.oneupheart-faq-content .oneupheart-faq-answer {
margin: 0 !important;
padding: 16px 18px 18px;
}
.oneupheart-faq-content .oneupheart-faq-answer > :first-child {
margin-top: 0;
}
.oneupheart-faq-content .oneupheart-faq-answer > :last-child {
margin-bottom: 0;
}
.oneupheart-faq-empty {
margin: 0;
padding: 18px;
background: var(--color-panel);
border: 1px dashed var(--color-border-strong);
border-radius: var(--radius);
color: var(--color-muted);
text-align: center;
}
.oneupheart-faq-page [hidden] {
display: none !important;
}
@media (max-width: 520px) {
.oneupheart-faq-search {
padding: 10px;
}
.oneupheart-faq-search-control {
min-height: 46px;
}
.oneupheart-faq-search-input {
padding-inline: 12px;
}
.oneupheart-faq-clear {
min-width: 64px;
padding-inline: 10px;
font-size: 0.86rem;
}
.oneupheart-faq-content details > summary {
min-height: 54px;
padding: 14px 46px 14px 14px;
font-size: 0.94rem;
}
.oneupheart-faq-content details > summary::after {
right: 17px;
}
.oneupheart-faq-content details > :not(summary) {
margin-right: 14px;
margin-left: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.oneupheart-faq-search-control,
.oneupheart-faq-clear,
.oneupheart-faq-content details > summary,
.oneupheart-faq-content details > summary::after {
transition: none;
}
}