/*
Theme Name:        Canvas Engine
Theme URI:         https://alidigital.com.tr
Author:            Ali Digital
Author URI:        https://alidigital.com.tr
Description:       A deliberately unopinionated WordPress engine theme. WordPress stays the management layer — content, menus, and a built-in code panel for Header / Footer / per-page Body blocks — while the actual visual design of every section is authored per client (by hand or with AI) as self-contained HTML/CSS/JS pasted into that panel. This theme intentionally ships with NO global color palette, NO baked-in typography scale, and NO prebuilt page sections: every client site should be free to look completely different from the last one, with zero CSS fighting the design that gets pasted in. Suited to corporate sites, portfolios, and landing pages. Not intended for e-commerce.
Version:           1.0.0
Requires at least: 6.0
Tested up to:       6.6
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:       canvas-engine
Tags:              custom-menu, featured-images, translation-ready, threaded-comments

This theme, like WordPress, is licensed under the GPL.
Use it to make something great.
*/

/* =========================================================================
   TABLE OF CONTENTS
   1.0  CSS Reset — structural only, zero opinions
   2.0  Structural tokens — layout math ONLY, never color or brand
   3.0  Base element behavior (no colors, no fonts-as-branding)
   4.0  Layout skeleton (container, sticky footer)
   5.0  Default header / footer chrome
       (used only when the admin hasn't pasted a Header/Footer code
       block into the Canvas Kod Paneli — see inc/class-canvas-code-panel.php)
   6.0  Accessibility helpers
   ========================================================================= */


/* =========================================================================
   1.0 CSS Reset
   Deliberately minimal — this is NOT a design system. Every client site's
   look and feel is supposed to arrive fully formed inside the Header /
   Footer / Body code blocks pasted into the theme's own admin panel, each
   bringing its own scoped <style>. This file must never fight that CSS,
   so nothing here sets a color, a font choice as "branding", or a spacing
   scale meant to be reused across sections.
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	margin: 0;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	min-height: 100vh;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: none;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word;
}

ul[class],
ol[class] {
	list-style: none;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

table {
	border-collapse: collapse;
	width: 100%;
}

/* =========================================================================
   2.0 Structural tokens
   These describe LAYOUT MATH only (how wide, how much gap) — never a
   color, a brand font, or anything a client would recognize as "the
   theme's look". Safe to keep global because they carry no visual
   opinion of their own.
   ========================================================================= */

:root {
	--container-width: 1200px;
	--container-padding: 1rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
}

/* =========================================================================
   3.0 Base element behavior
   Typography uses the system font stack because that is a *technical*
   default (fast, no web-font request, matches the OS) — not a brand
   choice. No font-weight/size scale is defined here on purpose: headings
   simply render at the browser's default sizes unless a pasted code
   block's own CSS overrides them.
   ========================================================================= */

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
}

/* WordPress core alignment classes — required for block/editor compatibility. */
.alignleft {
	float: left;
	margin-right: var(--space-md);
}

.alignright {
	float: right;
	margin-left: var(--space-md);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignwide {
	max-width: calc(var(--container-width) + 2 * var(--space-md));
}

.alignfull {
	max-width: 100%;
}

/* =========================================================================
   4.0 Layout skeleton
   ========================================================================= */

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* Sticky-footer skeleton: keeps the footer pinned to the bottom of the
   viewport on short pages instead of floating mid-screen. Harmless once
   real content (or a pasted code block) fills the page normally. */
.site {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content {
	flex: 1 0 auto;
}

/* =========================================================================
   5.0 Default header / footer chrome
   Renders ONLY when no custom Header/Footer code has been saved in the
   Canvas Kod Paneli — see header.php / footer.php. Kept intentionally
   plain (no color) so a brand-new install never looks like "a theme demo"
   that a client's real code block then has to visually fight.
   ========================================================================= */

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: var(--space-sm);
}

.site-branding {
	font-weight: 700;
}

.primary-navigation ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-md);
}

.primary-navigation ul ul {
	display: none;
	position: absolute;
	flex-direction: column;
	gap: 0;
	padding: var(--space-sm);
	background: Canvas;
	border: 1px solid currentColor;
}

.primary-navigation li {
	position: relative;
}

.primary-navigation li:hover > ul,
.primary-navigation li:focus-within > ul {
	display: flex;
}

.menu-toggle {
	display: none;
}

@media (max-width: 782px) {
	.menu-toggle {
		display: inline-block;
	}

	.primary-navigation {
		display: none;
		width: 100%;
	}

	.primary-navigation.is-open {
		display: block;
	}

	.primary-navigation ul {
		flex-direction: column;
		align-items: flex-start;
	}

	.primary-navigation ul ul {
		position: static;
		border: none;
		padding-left: var(--space-md);
	}
}

.site-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	padding-block: var(--space-md);
}

.footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
}

/* Admin-only notices rendered by canvas_admin_only_notice() when a Body
   code block hasn't been filled in yet. Visible to logged-in editors
   only — never to real site visitors — so it's allowed a light, generic
   style even in an otherwise colorless theme. */
.canvas-admin-notice {
	margin: var(--space-md) auto;
	max-width: var(--container-width);
	padding: var(--space-md);
	border: 2px dashed currentColor;
	opacity: 0.7;
}

/* =========================================================================
   6.0 Accessibility helpers
   ========================================================================= */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: Canvas;
	color: CanvasText;
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	left: var(--space-sm);
	padding: 0.75rem 1rem;
	top: var(--space-sm);
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}