{% extends "base.html" %}

{% block extrahead %}
  <style>
    .adopt-banner {
      background: linear-gradient(145deg, var(--md-primary-fg-color--light), var(--md-primary-fg-color));
      padding: 1rem;
      text-align: center;
      margin-bottom: 1rem;
      border-radius: 10px;
      box-shadow: 
        0 8px 15px rgba(0,0,0,0.15),
        0 12px 25px rgba(0,0,0,0.1),
        inset 0 -4px 0px #1565C0,
        inset 0 -8px 0px #0D47A1;
    }
    .adopt-button {
      display: inline-block;
      padding: 0.25rem 0.75rem;
      background: var(--md-primary-bg-color);
      color: var(--md-primary-fg-color) !important;
      text-decoration: none;
      border-radius: 4px;
      font-weight: bold;
      font-size: 0.8rem;
      transition: all 0.3s ease;
      box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }
    .adopt-button:hover {
      background: var(--md-accent-fg-color);
      color: var(--md-accent-bg-color) !important;
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    [data-md-color-scheme="slate"] .adopt-banner {
      box-shadow: 
        0 8px 15px rgba(0,0,0,0.25),
        0 12px 25px rgba(0,0,0,0.2),
        inset 0 -4px 0px #0D47A1,
        inset 0 -8px 0px #052555;
    }
  </style>
{% endblock %}

{% block announce %}
    <div style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; gap: 10px; padding: 0.5rem;">
        <div style="display: flex; align-items: center; gap: 20px;">
            <div>
          This is a Bnkops Project -  
          <a href="https://bnkops.com"><strong>bnkops.com</strong></a> | want to contribute? 
            </div>
            <a href="/adopt" class="adopt-button">
          🤝 Adopt Project 💡
            </a>
        </div>

        <a href="http://docs.freealberta.org" style="
            padding: 0.25rem 0.75rem;
            border-radius: 4px;
            color: var(--md-primary-bg-color);
            font-weight: bold;
            text-decoration: none;
            font-size: 0.8rem;
            background: var(--md-primary-fg-color);
            transition: all 0.3s ease;">
            Login
        </a>
    </div>
{% endblock %}

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

{% block scripts %}
    {{ super() }}
    <script src="{{ 'javascripts/extra.js' | url }}"></script>
{% endblock %}