.trama-guide-layout > .wp-block-columns {
align-items: flex-start;
overflow: visible;
}
.trama-guide-layout > .wp-block-columns > .wp-block-column {
align-self: stretch;
overflow: visible;
}
.is-style-trama-guide-navigation {
position: sticky;
top: 2rem;
align-self: flex-start;
}
.trama-guide-content > .wp-block-group {
scroll-margin-top: 2rem;
}
.is-style-trama-guide-navigation .trama-guide-links {
list-style: none;
}
.is-style-trama-guide-navigation .wp-block-navigation-item__content,
.is-style-trama-guide-navigation .trama-guide-links a {
display: block;
border-left: 2px solid transparent;
padding: 0.5rem 0 0.5rem 1rem;
text-decoration: none;
transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}
.is-style-trama-guide-navigation .wp-block-navigation-item__content:hover,
.is-style-trama-guide-navigation .wp-block-navigation-item__content:focus-visible,
.is-style-trama-guide-navigation .wp-block-navigation-item__content[aria-current="location"],
.is-style-trama-guide-navigation .trama-guide-links a:hover,
.is-style-trama-guide-navigation .trama-guide-links a:focus-visible,
.is-style-trama-guide-navigation .trama-guide-links a[aria-current="location"] {
border-left-color: var(--wp--preset--color--accent);
color: var(--wp--preset--color--contrast);
}
.is-style-trama-guide-navigation .wp-block-navigation-item__content[aria-current="location"],
.is-style-trama-guide-navigation .trama-guide-links a[aria-current="location"] {
background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
font-weight: 700;
}
.trama-guide-content > .wp-block-group + .wp-block-group {
margin-top: var(--wp--preset--spacing--70);
border-top: 1px solid var(--wp--preset--color--accent-3);
padding-top: var(--wp--preset--spacing--70);
}
.trama-guide-content .wp-block-image img {
display: block;
width: 100%;
border: 1px solid var(--wp--preset--color--accent-3);
box-shadow: 0 20px 40px color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
}
.is-style-trama-guide-accordion {
border-top: 1px solid var(--wp--preset--color--accent-3);
interpolate-size: allow-keywords;
}
.is-style-trama-guide-accordion > .wp-block-details {
border-bottom: 1px solid var(--wp--preset--color--accent-3);
margin-block: 0;
}
.is-style-trama-guide-accordion > .wp-block-details::details-content {
block-size: 0;
overflow: hidden;
opacity: 0;
transition: block-size 360ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease, content-visibility 360ms allow-discrete;
}
.is-style-trama-guide-accordion > .wp-block-details[open]::details-content {
block-size: auto;
opacity: 1;
}
.is-style-trama-guide-accordion > .wp-block-details > summary {
position: relative;
list-style: none;
padding: 1.15rem 3rem 1.15rem 0;
font-weight: 700;
}
.is-style-trama-guide-accordion > .wp-block-details > summary::-webkit-details-marker {
display: none;
}
.is-style-trama-guide-accordion > .wp-block-details > summary::after {
content: "+";
position: absolute;
top: 50%;
right: 0.25rem;
display: grid;
width: 1.75rem;
height: 1.75rem;
translate: 0 -50%;
place-items: center;
border: 1px solid var(--wp--preset--color--accent-3);
color: var(--wp--preset--color--accent);
font-size: 1.15rem;
font-weight: 500;
transition: rotate 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms ease;
}
.is-style-trama-guide-accordion > .wp-block-details[open] > summary::after {
rotate: 45deg;
background: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
}
.is-style-trama-guide-accordion > .wp-block-details > :not(summary) {
margin-top: 0;
padding-right: 3rem;
padding-bottom: 1.25rem;
}
@media (max-width: 781px) {
.is-style-trama-guide-navigation {
position: static;
}
.trama-guide-content > .wp-block-group + .wp-block-group {
margin-top: var(--wp--preset--spacing--60);
padding-top: var(--wp--preset--spacing--60);
}
}
@media (prefers-reduced-motion: reduce) {
.is-style-trama-guide-navigation .wp-block-navigation-item__content,
.is-style-trama-guide-accordion > .wp-block-details::details-content,
.is-style-trama-guide-accordion > .wp-block-details > summary::after {
transition: none;
}
}