/*
Theme Name: ArisCanvas
Theme URI: https://arhiez.net/
Author: Aris Lesmana
Description: A lightweight, responsive, one-page WordPress canvas for a personal digital business card. Classic Editor-friendly, with searchable font and icon pickers, optional dark background image overlay, and copyright footer.
Version: 1.0.4
Requires at least: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ariscanvas
Tags: one-column, custom-background, block-styles, wide-blocks, accessibility-ready
*/

:root {
  color-scheme: dark;
  --ac-text: #fff;
  --ac-background: #000;
  --ac-link: #c5ddff;
  --ac-content-width: 760px;
  --ac-wide-width: 1200px;
  --ac-gutter: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 0;
  background-color: var(--ac-background);
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--ac-text);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
  overflow-wrap: break-word;
}

/* Backgrounds configured via WordPress' built-in background controls
   automatically receive a 55% dark overlay, without altering the image. */
body.ariscanvas-has-bg-image::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
}

.ariscanvas-shell {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;
}
/* WordPress places an admin toolbar above the document (32px desktop).
   Subtract its height so the footer is visible without extra scrolling. */
body.admin-bar .ariscanvas-shell {
  min-height: calc(100vh - 32px);
  min-height: calc(100dvh - 32px);
}
.ariscanvas-main { flex: 1 0 auto; min-width: 0; width: 100%; }
.ariscanvas-content { width: 100%; }

/* Ordinary blocks are readable; wide/full blocks remain freely editable. */
.ariscanvas-content > :not(.alignwide):not(.alignfull) {
  max-width: min(var(--ac-content-width), calc(100% - 2 * var(--ac-gutter)));
  margin-inline: auto;
}
.ariscanvas-content > .alignwide {
  max-width: min(var(--ac-wide-width), calc(100% - 2 * var(--ac-gutter)));
  margin-inline: auto;
}
.ariscanvas-content > .alignfull { max-width: none; width: 100%; }
.ariscanvas-content > :first-child { margin-block-start: 0; }
.ariscanvas-content > :last-child { margin-block-end: 0; }

/* Do not override Gutenberg's user-selected colors or text alignment. */
a { color: var(--ac-link); text-underline-offset: .17em; }
a:hover { text-decoration-thickness: .12em; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
img, video, iframe, svg { max-width: 100%; }
img, video { height: auto; }
figure { max-width: 100%; }
.wp-block-embed__wrapper { max-width: 100%; }

.ariscanvas-footer {
  flex: 0 0 auto;
  padding: 20px var(--ac-gutter) 24px;
  color: #b8b8b8;
  text-align: center;
  font-size: .8rem;
  line-height: 1.6;
}

.ariscanvas-screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ariscanvas-screen-reader-text:focus {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  padding: 10px 16px;
  clip-path: none;
  background: #fff;
  color: #000;
}

/* Visible only to administrators until a static homepage is configured. */
.ariscanvas-admin-notice {
  max-width: min(680px, calc(100% - 2 * var(--ac-gutter)));
  margin: 48px auto;
  padding: 16px 20px;
  border: 1px solid #555;
  border-radius: 6px;
  background: #191919;
  color: #fff;
}

@media (max-width: 782px) {
  /* WordPress increases the admin toolbar height on narrow screens. */
  body.admin-bar .ariscanvas-shell {
    min-height: calc(100vh - 46px);
    min-height: calc(100dvh - 46px);
  }
}
@media (max-width: 600px) {
  .ariscanvas-footer { padding-block: 18px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Classic Editor's HTML borders and rules stay proportional on narrow screens. */
.ariscanvas-content .ac-horizontal-rule { display:block; box-sizing:border-box; max-width:100%; height:0; }
.ariscanvas-content [class^="fa-"],
.ariscanvas-content [class*=" fa-"] { display:inline-block; }