/* Cross-reference styling for NSW HSC Software Engineering Textbook */
/* Following MkDocs Material Design admonition style guide */

/* Custom admonition icons using Material Design approach */
:root {
  --md-admonition-icon--builds-on: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2L2 7V17L12 22L22 17V7L12 2M12 4.44L19.55 8.5L12 12.56L4.45 8.5L12 4.44M4 9.5L11 13.5V20.5L4 16.5V9.5M13 13.5L20 9.5V16.5L13 20.5V13.5Z"/></svg>');
  --md-admonition-icon--see-also: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5C16 11.11 15.41 12.59 14.44 13.73L14.71 14H15.5L20.5 19L19 20.5L14 15.5V14.71L13.73 14.44C12.59 15.41 11.11 16 9.5 16A6.5 6.5 0 0 1 3 9.5A6.5 6.5 0 0 1 9.5 3M9.5 5C7 5 5 7 5 9.5S7 14 9.5 14S14 12 14 9.5S12 5 9.5 5Z"/></svg>');
  --md-admonition-icon--next-up: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8 5.14V19.14L19 12.14L8 5.14Z"/></svg>');
  --md-admonition-icon--prerequisite: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M1 21H23L12 2L1 21M13 18H11V16H13V18M13 14H11V10H13V14Z"/></svg>');
}

/* Enhanced cross-reference link styling */
.md-typeset .admonition.builds-on a,
.md-typeset .admonition.see-also a,
.md-typeset .admonition.next-up a,
.md-typeset .admonition.prerequisite a {
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dotted currentColor;
    transition: all 0.2s ease;
    opacity: 0.9;
}

.md-typeset .admonition.builds-on a:hover,
.md-typeset .admonition.see-also a:hover,
.md-typeset .admonition.next-up a:hover,
.md-typeset .admonition.prerequisite a:hover {
    border-bottom-style: solid;
    opacity: 1;
    transform: translateY(-1px);
}

.md-typeset .admonition.builds-on a::after,
.md-typeset .admonition.see-also a::after,
.md-typeset .admonition.next-up a::after,
.md-typeset .admonition.prerequisite a::after {
    content: " ↗";
    font-size: 0.8em;
    opacity: 0.7;
    margin-left: 2px;
}

/* Builds-on admonition styling */
.md-typeset .admonition.builds-on,
.md-typeset details.builds-on {
    border-color: rgb(40, 167, 69);
}
.md-typeset .builds-on > .admonition-title,
.md-typeset .builds-on > summary {
    background-color: rgba(40, 167, 69, 0.1);
    border-bottom: 1px solid rgba(40, 167, 69, 0.2);
}
.md-typeset .builds-on > .admonition-title::before,
.md-typeset .builds-on > summary::before {
    background-color: rgb(40, 167, 69);
    -webkit-mask-image: var(--md-admonition-icon--builds-on);
            mask-image: var(--md-admonition-icon--builds-on);
}

/* See-also admonition styling */
.md-typeset .admonition.see-also,
.md-typeset details.see-also {
    border-color: rgb(0, 123, 255);
}
.md-typeset .see-also > .admonition-title,
.md-typeset .see-also > summary {
    background-color: rgba(0, 123, 255, 0.1);
    border-bottom: 1px solid rgba(0, 123, 255, 0.2);
}
.md-typeset .see-also > .admonition-title::before,
.md-typeset .see-also > summary::before {
    background-color: rgb(0, 123, 255);
    -webkit-mask-image: var(--md-admonition-icon--see-also);
            mask-image: var(--md-admonition-icon--see-also);
}

/* Next-up admonition styling */
.md-typeset .admonition.next-up,
.md-typeset details.next-up {
    border-color: rgb(253, 126, 20);
}
.md-typeset .next-up > .admonition-title,
.md-typeset .next-up > summary {
    background-color: rgba(253, 126, 20, 0.1);
    border-bottom: 1px solid rgba(253, 126, 20, 0.2);
}
.md-typeset .next-up > .admonition-title::before,
.md-typeset .next-up > summary::before {
    background-color: rgb(253, 126, 20);
    -webkit-mask-image: var(--md-admonition-icon--next-up);
            mask-image: var(--md-admonition-icon--next-up);
}

/* Prerequisite admonition styling */
.md-typeset .admonition.prerequisite,
.md-typeset details.prerequisite {
    border-color: rgb(220, 53, 69);
}
.md-typeset .prerequisite > .admonition-title,
.md-typeset .prerequisite > summary {
    background-color: rgba(220, 53, 69, 0.1);
    border-bottom: 1px solid rgba(220, 53, 69, 0.2);
}
.md-typeset .prerequisite > .admonition-title::before,
.md-typeset .prerequisite > summary::before {
    background-color: rgb(220, 53, 69);
    -webkit-mask-image: var(--md-admonition-icon--prerequisite);
            mask-image: var(--md-admonition-icon--prerequisite);
}

/* Enhanced hover effects for cross-reference admonitions */
.md-typeset .admonition.builds-on:hover,
.md-typeset .admonition.see-also:hover,
.md-typeset .admonition.next-up:hover,
.md-typeset .admonition.prerequisite:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive design for cross-references */
@media (max-width: 768px) {
    .md-typeset .admonition.builds-on,
    .md-typeset .admonition.see-also,
    .md-typeset .admonition.next-up,
    .md-typeset .admonition.prerequisite {
        margin: 1rem -0.8rem;
        border-radius: 0;
    }
    
    .md-typeset .builds-on > .admonition-title,
    .md-typeset .see-also > .admonition-title,
    .md-typeset .next-up > .admonition-title,
    .md-typeset .prerequisite > .admonition-title {
        font-size: 0.85rem;
    }
}

/* Dark mode enhancements */
[data-md-color-scheme="slate"] .md-typeset .admonition.builds-on:hover,
[data-md-color-scheme="slate"] .md-typeset .admonition.see-also:hover,
[data-md-color-scheme="slate"] .md-typeset .admonition.next-up:hover,
[data-md-color-scheme="slate"] .md-typeset .admonition.prerequisite:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.builds-on a,
[data-md-color-scheme="slate"] .md-typeset .admonition.see-also a,
[data-md-color-scheme="slate"] .md-typeset .admonition.next-up a,
[data-md-color-scheme="slate"] .md-typeset .admonition.prerequisite a {
    color: rgba(255, 255, 255, 0.87);
}

[data-md-color-scheme="slate"] .md-typeset .admonition.builds-on a:hover,
[data-md-color-scheme="slate"] .md-typeset .admonition.see-also a:hover,
[data-md-color-scheme="slate"] .md-typeset .admonition.next-up a:hover,
[data-md-color-scheme="slate"] .md-typeset .admonition.prerequisite a:hover {
    color: rgba(255, 255, 255, 1);
}