/* Cowboy hat mark — minimal monochrome silhouette, themed via --fg.
 *
 * Rendered as a CSS mask rather than inline SVG: mdBook lowercases attribute
 * names in inline HTML, which breaks the case-sensitive SVG `viewBox`. Keeping
 * the SVG in a data-URI here preserves it and lets the color track the theme. */

#cowboy-hat-container {
    text-align: center;
    margin: 2.5rem auto 2rem;
}

#cowboyHat {
    display: inline-block;
    width: 190px;
    max-width: 55%;
    aspect-ratio: 320 / 140;
    background-color: var(--fg, #c7c9d9);
    opacity: 0.9;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s ease;

    --hat: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20320%20140'%3E%3Cpath%20d='M30%2094C80%2080%20120%2088%20160%2088C200%2088%20240%2080%20290%2094C248%20120%20196%20114%20160%20112C124%20114%2072%20120%2030%2094Z'/%3E%3Cpath%20d='M110%2088C108%2052%20110%2038%20126%2035C138%2033%20146%2041%20160%2041C174%2041%20182%2033%20194%2035C210%2038%20212%2052%20210%2088Z'/%3E%3C/svg%3E");
    -webkit-mask: var(--hat) center / contain no-repeat;
            mask: var(--hat) center / contain no-repeat;
}

#cowboyHat:hover {
    /* a quiet tip of the hat */
    transform: translateY(-4px) rotate(-4deg);
    opacity: 1;
}

@media (max-width: 768px) {
    #cowboyHat {
        width: 140px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #cowboyHat {
        transition: none;
    }
    #cowboyHat:hover {
        transform: none;
    }
}