/* Tokens (safe defaults; inherit your globals if present) */
:root {
  --bg: #121217;
  --bg-accent: #16161e;  
  --bg-border: #2e2e38;
  --ink: #e7edf7;
  --ink-dim: #a0a8b4;
  --accent: #7dd3fc;
  --accent-warm: #facc15;
  --radius: 6px;
  --pad-x: .65rem;
  --pad-y: .4rem;
  --gap: .25rem;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #fdfdfd;
  color: var(--bg, #222) ;
  /*overflow-x: hidden;*/ /* ✅ prevents iPad drag */
}

.layout-wrapper {
  display: flex;
  flex-direction: column;

}

main {
  flex: 1;
  padding: 2rem 1.5rem 0 1.5rem;
  /* background-color: var(--bg);
  border-radius: var(--radius, 12px);
  border: 1px solid var(--ink-dim); */
  color: var(--ink);
  margin: 0 15px 0 15px;
}

main div.alert.alert-success {position: relative;
    background-color:rgba(58,168,255,.18);
    display: block;
    padding: 15px;
    /* margin-bottom: 15px; */
    left: -39px;
    width: calc(100% + 48px);
    top: -32px;
}

div.flex-container {
  display: flex;           /* make children line up */
  gap: 40px;               /* space between the two divs */
  flex-wrap: wrap;         /* allow wrap on small screens */}

div.flex-container > div.column {
  flex: 1 1 0;             /* share width equally */
 /* min-width: 260px;  */      /* optional: prevents too-narrow columns */
  box-sizing: border-box;
}

div.flex-container > div.column h3 {
  margin-top: 5px;
}


main h2 {
  margin-top: 0;
}

.container {
  display: flex;
  min-height: calc(100vh - 53px);
  background-color: var(--bg);
}

header, footer {
  background-color: var(--sb-panel) ;
  color: #fff;
  padding: 1rem;
}

header {height:20px;}

footer {
  font-size: 0.9rem;
  height:20px;
  line-height:15px;
  padding:7px 5px 25px 10px;
  z-index: 100;
  /*margin-top:-1px;*/
  border-top: 1px solid var(--sb-hr);
  color: var(--sb-text);
}

a {
  color: #0366d6;
  text-decoration: none;
}



a:hover {
  text-decoration: underline;
}

h1, h2, h3 {
  color: var(--ink, #222  );
}




.site-title {
  margin: 0;
  height: 80px;
  float: left;
  position:relative;
  margin-top:-20px
}

.site-title a {
  display: block;
  width: 200px;              /* Adjust to match your image width */
  height: 80px;              /* Adjust to match your image height */
  background-image: url('/images/logo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center left;
  text-indent: -9999px;      /* Hides text */
  overflow: hidden;
}



.fancybox__content {padding:1px;}