/*
Theme Name: Franky Tools Theme
Description: Child theme of Twenty Twenty-Five for Franky Tools. Holds the app layout (header, sidebar, main area), the card grid, the dark palette and the page templates. The user bar, menu and card styling live in the Franky Tools Core plugin.
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.7
Requires PHP: 7.4
Text Domain: frankytools-theme
*/

:root {
  --bg: #121212;
  --panel: #1a1a1a;
  --border: #2a2a2a;
  --text: #e6e6e6;
  --muted: #9a9a9a;
  --hover: #242424;
  --divider: #444;
  --header-h: 57px;
  --sidebar-w: 240px;
  --adminbar-h: var(--wp-admin--admin-bar--height, 0px);
}

/* always reserve the scrollbar space so the header does not shift between pages */
html {
  overflow-y: scroll;
}

body {
  background: var(--bg);
  color: var(--text);
}

/* layout: fixed header and sidebar, only the main area scrolls */
.app-shell {
  padding: 0;
  padding-top: calc(var(--header-h) + var(--adminbar-h)) !important;
  display: block;
  min-height: 100vh;
}

.app-shell > * {
  margin-block: 0;
}

/* sidebar */
.app-sidebar {
  position: fixed;
  top: calc(var(--adminbar-h) + var(--header-h));
  bottom: 0;
  left: 0;
  z-index: 90;
  width: var(--sidebar-w);
  box-sizing: border-box;
  overflow-y: auto;
  padding: 0;
  gap: 0;
  background: var(--panel);
  border-right: 1px solid var(--border);
  transition: transform 0.2s ease;
}

.app-sidebar .wp-block-site-title {
  display: none;
}

.ftdl-collapsed .app-sidebar {
  transform: translateX(-100%);
}

.app-main {
  min-width: 0;
  margin-left: var(--sidebar-w);
  padding: 24px !important;
  transition: margin-left 0.2s ease;
}

.app-main > * {
  margin-block-start: 0 !important;
}

.ftdl-collapsed .app-main {
  margin-left: 0;
}

/* cards */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
}

:not(.card-grid) > .card + .card {
  margin-top: 16px;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 480px));
  justify-content: start;
  gap: 16px;
}

.card-grid > .card {
  margin-block: 0;
}

/* small screens: the sidebar slides over the page */
@media (max-width: 781px) {
  .app-main {
    margin-left: 0;
  }
}

/* Discord image in button */
.ft-discord-btn.wp-block-button {
  width: auto !important;
  flex: 0 0 auto;
}
.ft-discord-btn .wp-block-button__link {
  width: auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 20px !important;
  border-radius: 24px !important;
  white-space: nowrap;
}
.ft-discord-btn .wp-block-button__link::after {
  content: "";
  width: 32px;
  height: 32px;
  background: url("https://www.frankytools.com/media/Discord-Symbol-Black.png") center / contain no-repeat;
}