/*
Theme Name: KSAN Landing
Theme URI: https://ksandiaye.com
Author: KSAN
Description: A one-page landing theme for ksandiaye.com: the KSAN logo with a small email login link. Change the email link under Appearance > Customize > Email Login.
Version: 1.0
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ksan-landing
*/

  /* One centered logo medallion, a small email link in the corner, a Senegal–Jamaica color band at the foot. */
  :root {
    --bg: #fbfaf6;
    --surface: #ffffff;
    --fg: #1f2a22;
    --muted: #5d6a60;
    --gold: #a77a1c;
    --gold-hi: #d6a93a;
    --green: #0f6b3a;
    --btn-fg: #ffffff;
    --ring: rgba(167,122,28,.35);
    --display: "Marcellus", "Trajan Pro", Georgia, serif;
    --body: "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #0d1611; --surface: #ffffff; --fg: #efe9da; --muted: #a8b2a9;
      --gold: #e0b551; --gold-hi: #f2cf74; --green: #1e9a57; --btn-fg: #ffffff;
      --ring: rgba(224,181,81,.4); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #0d1611; --surface: #ffffff; --fg: #efe9da; --muted: #a8b2a9;
    --gold: #e0b551; --gold-hi: #f2cf74; --green: #1e9a57; --btn-fg: #ffffff;
    --ring: rgba(224,181,81,.4); color-scheme: dark;
  }

  html, body { min-height: 100%; }
  body {
    margin: 0;
    position: relative;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-image: radial-gradient(ellipse at 50% 30%, var(--ring) 0%, transparent 55%);
  }
  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    text-align: center;
    padding-block: 48px 40px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .medallion {
    width: min(380px, 78vw);
    aspect-ratio: 1;
    max-width: 100%;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 0 0 1px var(--ring), 0 24px 60px -24px rgba(60,40,0,.35);
    display: grid;
    place-items: center;
    overflow: hidden;
    animation: rise .9s ease-out both;
  }
  .medallion img { width: 100%; height: 100%; object-fit: cover; display: block; }

  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

  .login {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 6px;
    color: var(--muted);
    font-family: var(--body);
    font-size: .75rem;
    letter-spacing: .04em;
    text-decoration: none;
    opacity: .75;
    transition: opacity .2s ease, color .2s ease;
  }
  .login:hover { opacity: 1; color: var(--gold); }
  .login:focus-visible { opacity: 1; outline: 2px solid var(--green); outline-offset: 2px; }
  .login svg { width: 14px; height: 14px; flex: none; }

  footer {
    text-align: center;
    font-size: .8rem;
    color: var(--muted);
    padding-block: 18px 22px;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }
  .band { display: flex; height: 5px; }
  .band i { flex: 1; }
  .band i:nth-child(1) { background: #00853f; }
  .band i:nth-child(2) { background: #fdef42; }
  .band i:nth-child(3) { background: #e31b23; }
  .band i:nth-child(4) { background: #000000; }
  .band i:nth-child(5) { background: #fed100; }
  .band i:nth-child(6) { background: #009b3a; }

  @keyframes rise { from { opacity: .001; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
  @media (prefers-reduced-motion: reduce) { .medallion { animation: none; } .login { transition: none; } }