@charset "UTF-8";

:root{
      /* Change these when you pick a palette */
      --bar-bg: #C47149;
      --link: #F5F52ED;
      --link-hover-bg: #8C3b2A;
      --link-hover: #C9A227;
      --border-hover: #111; /* you can make this different if you like */
    }

    /* Reset-ish */
    *, *::before, *::after { box-sizing: border-box; }
    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; }

    /* NAVBAR */
    #site-nav {
      position: sticky;        /* sticks to the top when scrolling */
      top: 0;
      z-index: 1000;           /* keeps it above content */
      background: var(--bar-bg);
      border-bottom: 1px solid #C47150;
    }

    #nav-inner {
		width:100%;
      max-width: 1200px;       /* optional container width */
      margin: 0 auto;
      padding: 0 16px;
      display: flex;
      align-items: center;
      gap: 16px;
      min-height: 64px;        /* comfy height */
    }

    /* Logo on the left */
    #nav-brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
    }
    #nav-brand img {
      display: block;
      height: 40px;            /* adjust as needed */
      width: auto;
    }

    /* Links on the right */
    #nav-links {
      margin-left: auto;       /* pushes links to the right */
      display: flex;
      align-items: center;
      gap: 4px;                /* space between items */
      list-style: none;
      padding: 0;
      margin: 0;
    }

    #nav-links a {
      display: block;
      padding: 12px 14px;
      text-decoration: none;
      color: var(--link);
      /* Prepare borders so hover doesn't shift layout */
      border-left: 1px solid transparent;
      border-right: 1px solid transparent;
      /* Optional: slightly rounded hit area */
      border-radius: 4px;
    }

    #nav-links a:hover,
    .nav-links a:focus-visible {
      background: var(--link-hover-bg);
      color: var(--link-hover);
      border-left-color: var(--border-hover);
      border-right-color: var(--border-hover);
      outline: none;
    }

    /* Optional: indicate current page */
    #nav-links a[aria-current="page"] {
      font-weight: 600;
    }

    /* Small screens: stack links if you like (kept simple, no burger) */
    @media (max-width: 600px) {
      #nav-inner { flex-wrap: wrap; }
      #nav-links { width: 100%; justify-content: flex-end; flex-wrap: wrap; }
      #nav-links a { padding: 10px 12px; }
    }