{% extends "base.html" %}


{% block styles %}
{{ super() }}
<link rel="stylesheet" href="{{ 'assets/stylesheets/extra.css' | url }}">
{% endblock %}



{% block header %}
{{ super() }}
{% if page.repo_url %}
<style>
    nav.md-header__inner.md-grid .md-search .md-search__button {
        content: 'Search ( ATLAS Internal Scope )' !important;
    }
</style>
{% endif %}
{% endblock %}

{% block extrahead %}
{{ super() }}

{% set jetmet = config.extra.jetetmiss %}


{% endblock %}

{% block scripts %}
{{ super() }}
<script src="{{ 'assets/javascripts/extra.js' | url }}"></script>
<script src="{{ 'assets/javascripts/mathjax.js' | url }}"></script>
<script src="https://unpkg.com/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.4.0/mermaid.min.js"></script>
{% endblock %}

{% block hero %}
{% if page.meta is defined and 'hero' in page.meta %}
<style>
    :root {
        --hero-height: 100px;
    }

    @media (max-width: 59.9375em) {
        :root {
            --hero-height: 60px;
        }
    }

    .hero-banner {
        display: block;
        width: 100%;
        height: var(--hero-height);
        opacity: 0.6;
        /* Increased to full opacity for better visibility; adjust if a fade is desired */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-bottom: 1px solid var(--md-default-fg-color--lightest);
        margin: 0 !important;
        /* Simplified margins to avoid hacks */
    }

    .hero-banner+* {
        margin-top: 0 !important;
        /* Ensures content abuts the banner cleanly */
    }

    .hero-banner~.md-grid .md-sidebar--primary,
    .hero-banner~.md-grid .md-sidebar--secondary {
        top: calc(var(--md-header-height) + var(--hero-height)) !important;
    }
</style>
<div class="hero-banner" style="background-image: url('{{ page.meta.hero | url }}')" aria-hidden="true"></div>
{% endif %}

{% endblock %}


{% block content %}
{{ super() }}
{% endblock %}