/* Tin Slice Site Styles (base) */

html { scroll-behavior: smooth; }
body {
	background: var(--bg);
	color: var(--text);
	font: 400 16px/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; }
/* Ensure form controls and buttons inherit theme font (e.g., monospace in ts-terminal/ts-unix) */
button, input, select, textarea { font-family: inherit; }

/* Header */
.site-header { position:sticky; top:0; z-index:50; background:var(--bg-alt); backdrop-filter: blur(8px); border-bottom:1px solid var(--border); }
.site-nav { position:relative; display:flex; align-items:center; gap:1rem; max-width:var(--content-max); margin:0 auto; padding:.6rem 1rem; }
.site-nav .brand { font-weight:600; font-size:1.05rem; display:flex; align-items:center; gap:.5rem; }
.site-nav .logo { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--text); font-weight:600; }
.site-nav img { display:block; }
/* Consistent brand logo size */
.site-nav .logo img { height:25px; width:auto; }
.menu-toggle { display:none; margin-left:.25rem; border:1px solid var(--border); background:var(--bg); color:var(--text); padding:.45rem .65rem; border-radius:var(--radius-s); cursor:pointer; font-size:1rem; }
.nav-links { list-style:none; display:flex; gap:.9rem; margin:0 0 0 auto; padding:0; z-index:200; }
.nav-links a { text-decoration:none; padding:.55rem .8rem; border-radius:var(--radius-s); color:var(--text-dim); font-weight:500; transition:all var(--trans-fast) ease; }
.nav-links a:hover, .nav-links a:focus-visible { background:var(--bg-inset); color:var(--text); }
.theme-control { position: relative; }
.theme-toggle { margin-left:.5rem; border:1px solid var(--border); background:var(--bg); color:var(--text); padding:.45rem .65rem; border-radius:var(--radius-s); cursor:pointer; font-size:.9rem; transition:all var(--trans-fast) ease; display:inline-flex; align-items:center; gap:.35rem; }
.theme-toggle:hover, .theme-toggle:focus-visible { background:var(--bg-inset); }
.theme-toggle svg { display:block; width:20px; height:20px; }

.theme-menu { position:absolute; right:0; top:110%; min-width:180px; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:.5rem; box-shadow:var(--shadow-m); padding:.25rem; z-index:100; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; }

/* Hide menu by default and show only when parent has focus-within */
.theme-menu[hidden] { display: none; }
.theme-control.open .theme-menu:not([hidden]) { display:block; }

.theme-menu .theme-item {
  width:100%;
  text-align:left;
  background:transparent;
  border:none;
  color:inherit;
  padding:.5rem .6rem;
  border-radius:.35rem;
  cursor:pointer;
  font:inherit;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Prevent text selection within menu on touch devices */
.theme-menu * {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.theme-menu .theme-item:hover, .theme-menu .theme-item:focus-visible { background:var(--bg-inset); }

/* Hero (refined layout to reduce excessive empty space on large screens) */
.hero {
  /* Flexible height: never too small, never overly tall */
  min-height: clamp(420px, 58vh, 640px);
  display: flex;
  align-items: center;              /* vertically center inner content */
  padding: clamp(2rem, 6vw, 5rem) 1.25rem;
  background: var(--hero-bg);
  color: var(--text);
  position: relative;
  overflow: hidden;
  border-bottom:1px solid var(--border); /* ensures crisp separation with next section */
  margin-bottom:0;
}
.hero .inner {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.2rem;
}

/* Large desktop: trim vertical footprint (content already concise) */
@media (min-width: 1600px) {
  .hero {
    min-height: 420px;
    padding-block: 5rem 4rem;
  }
}

/* Short displays: allow tighter hero */
@media (max-height: 700px) {
  .hero {
    min-height: 50vh;
  }
}

/* Remove top border from first content section following hero to prevent double / misaligned rule */
.hero + .content-section {
  border-top:0;
}

/* Safety: if any other element is inserted between hero and first section, still avoid double line */
.content-section:first-of-type {
  border-top:0;
}

/* Optional: ensure background transition remains seamless if themes adjust surfaces */
@supports (background: linear-gradient(var(--bg), var(--bg))) {
  .hero {
    background: var(--hero-bg);
  }
}

/* Buttons */
.btn-primary, .btn-outline, .btn-outline-neutral { font:600 0.95rem/1.1 inherit; padding:.85rem 1.2rem; border-radius:.6rem; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; letter-spacing:.3px; transition:background-color var(--trans-fast) ease, border-color var(--trans-fast) ease, box-shadow var(--trans-fast) ease, color var(--trans-fast) ease; }
.btn-primary { background:var(--accent); color:#fff; border:1px solid rgba(27,31,36,.15); box-shadow:0 1px 0 rgba(27,31,36,.1); }
.btn-primary:hover { background:#0757c3; }
.btn-primary:active { background:#054da3; box-shadow:inset 0 1px 0 rgba(0,0,0,.1); }
.btn-primary:focus-visible { box-shadow:var(--focus-ring); }

.btn-outline { border:2px solid var(--accent); color:var(--accent); background:transparent; }
.btn-outline:hover, .btn-outline:focus-visible { background:var(--accent); color:#fff; }
.btn-outline:active { filter:saturate(1.05); }

/* Neutral outline button (GitHub-like) */
.btn-outline-neutral { border:1px solid var(--border); color:var(--text); background:var(--bg); }
.btn-outline-neutral:hover, .btn-outline-neutral:focus-visible { background:var(--bg-inset); border-color:#8c959f; }
.btn-outline-neutral:active { background:#eaeef2; }

/* Skip link */
.skip-link { position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { left:0; top:0; width:auto; height:auto; background:#000; color:#fff; padding:.75rem 1rem; z-index:1000; }

/* Main Sections */
.content-section { padding:3.2rem 1.25rem; border-top:1px solid var(--border); }
.content-section.alt { background: var(--section-alt-bg); }
.content-section .inner { max-width:var(--content-max); margin:0 auto; }
.content-section h2 { margin:0 0 1.25rem; font-size:1.9rem; letter-spacing:-.5px; line-height:1.15; }

/* Alt background is driven by --section-alt-bg per theme */

.section-head { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-bottom:1rem; }
.filters { display:flex; align-items:center; gap:.6rem; margin-left:auto; }
.filters select, .filters input[type=search] { border:1px solid var(--border); background:var(--bg); color:inherit; padding:.55rem .65rem; border-radius:var(--radius-s); font:inherit; }
.filters input[type=search] { min-width:190px; }

/* Projects Grid */
.projects-grid { display:grid; gap:1rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); }
.project-card { position:relative; display:flex; flex-direction:column; gap:.6rem; padding:1.05rem .95rem 1.1rem; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-s); transition:transform var(--trans-fast) ease, box-shadow var(--trans-fast) ease; }
.project-card:hover, .project-card:focus-within { transform:translateY(-4px); box-shadow:0 6px 18px -6px rgba(0,0,0,.25); }
.project-card h3 { font-size:1.05rem; margin:.15rem 0 .2rem; line-height:1.25; }
.project-card h3 a { text-decoration:none; color:var(--accent); }
.project-card p { margin:0 0 .4rem; font-size:.85rem; line-height:1.35; color:var(--text-dim); }
.meta-row { display:flex; flex-wrap:wrap; gap:.4rem .55rem; align-items:center; font-size:.7rem; text-transform:uppercase; letter-spacing:.8px; color:var(--text-dim); }
.badge { display:inline-flex; align-items:center; gap:.35rem; background:var(--bg-alt); border:1px solid var(--border); padding:.25rem .55rem; border-radius:999px; font-size:.65rem; font-weight:600; line-height:1.1; letter-spacing:.5px; color:var(--text-dim); }
.badge.accent { background:var(--accent); border-color:var(--accent); color:#fff; }
.badge.stars { background:var(--bg-alt); }

.notice { margin:1rem 0; padding:.9rem 1rem; border:1px solid var(--border); background:var(--bg-alt); border-radius:var(--radius-s); font-size:.85rem; }
.notice.error { border-color:var(--danger); background:rgba(217,48,37,.08); color:var(--danger); }
.loading { opacity:.6; }
.loading::after { content:""; display:inline-block; width:1em; height:1em; margin-left:.5em; border:2px solid currentColor; border-radius:50%; border-right-color:transparent; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

.doc-content { border:1px solid var(--border); background:var(--bg); padding:1.1rem 1.2rem; border-radius:var(--radius-m); min-height:160px; box-shadow:var(--shadow-s); }
.doc-content h1, .doc-content h2, .doc-content h3 { line-height:1.2; }
.doc-content pre { background:var(--code-bg); padding:.75rem .9rem; border-radius:var(--radius-s); overflow:auto; font-size:.85rem; }
.doc-content code { background:var(--code-bg); padding:.15rem .4rem; border-radius:var(--radius-s); font-size:.85rem; }
.doc-content a { color:var(--accent); }

.service-list { list-style:disc; margin:0 0 0 1.15rem; padding:0; display:grid; gap:.4rem; }
.link-list { list-style:none; padding:0; margin:.6rem 0 0; display:flex; gap:1rem; flex-wrap:wrap; }
.link-list a { color:var(--accent); text-decoration:none; }
.link-list a:hover, .link-list a:focus-visible { text-decoration:underline; }

.btn-primary, .btn-outline, .btn-outline-neutral { cursor:pointer; }

/* Footer */
.site-footer { background:var(--bg-alt); padding:2.2rem 1.25rem; border-top:1px solid var(--border); font-size:.85rem; }
.site-footer .inner { max-width:var(--content-max); margin:0 auto; }
.site-footer a { color:var(--accent); text-decoration:none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration:underline; }

/* Focus styles */
:focus-visible { outline:none; box-shadow:var(--focus-ring); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
	.project-card:hover, .project-card:focus-within { transform:none; }
}

/* Responsive tweaks */
@media (max-width: 900px) {
	.menu-toggle { display:inline-flex; align-items:center; margin-left:auto; }

	.nav-links {
		display:none;
		position:absolute;
		right:1rem;
		top:100%;                /* anchor directly below nav bar for consistency */
		margin-top:.4rem;
		flex-direction:column;
		background:var(--bg-alt);
		padding:.6rem;
		border:1px solid var(--border);
		border-radius:var(--radius-s);
		width:min(260px, 85vw); /* prevent over-wide panel */
		box-shadow:var(--shadow-m);
	}

	.nav-links.show { 
		display:flex !important; /* ensure visibility even if another rule overrides */
	}

	.nav-links a {
		min-width:100%;
	}

	.site-nav { flex-wrap:wrap; position:relative; }
}

@media (min-width: 700px) {
	.content-section { padding:4.2rem 2rem; }
}

@media (min-width: 1040px) {
	.project-card { padding:1.15rem 1.05rem 1.2rem; }
}

/* Utility */
.small { font-size:.75rem; color:var(--text-dim); }
code { font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; }