/*
Theme Name: Darkfolio
Description: A dark block theme for small-business portfolio sites. Logo slot in the top-left that auto-fits the header, a Portfolio post type, ready-made section patterns, and light CSS animations. Everything is editable in the Site Editor (Appearance > Editor).
Author: You
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
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: darkfolio
*/

/* ==========================================================================
   Quick settings: change these and the whole theme follows
   ========================================================================== */
:root {
	--logo-max-height: 44px;   /* logo is scaled down to fit this height */
	--logo-max-width: 220px;   /* ...and this width */
	--header-height: 72px;
	--radius: 14px;
	--line: rgba(255, 255, 255, 0.09);
	--ease: cubic-bezier(.2, .7, .2, 1);
}

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
img { height: auto; }
:focus-visible { outline: 2px solid var(--wp--preset--color--accent-2); outline-offset: 3px; }

/* ==========================================================================
   Header: sticky bar, logo top-left, menu right
   ========================================================================== */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(14, 16, 34, 0.82);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}
body.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { body.admin-bar header.wp-block-template-part { top: 46px; } }

.site-header { padding-inline: var(--wp--preset--spacing--40); }
.site-header__inner { min-height: var(--header-height); gap: 1.5rem; }
.site-branding { gap: 0.9rem; align-items: center; flex-wrap: nowrap; }
.site-branding .wp-block-site-title { margin: 0; font-size: 1.1rem; font-weight: 700; letter-spacing: .01em; }
.site-branding .wp-block-site-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }

/* Logo auto-fit: any uploaded image shrinks to fit the bar, keeps its proportions */
.site-header .wp-block-site-logo { margin: 0; line-height: 0; flex: 0 0 auto; }
.site-header .wp-block-site-logo a,
.site-header .wp-block-site-logo img {
	display: block;
	width: auto !important;
	height: auto !important;
	max-height: var(--logo-max-height);
	max-width: var(--logo-max-width);
	object-fit: contain;
}

.wp-block-navigation a { text-decoration: none; }
.wp-block-navigation .wp-block-navigation-item__content { padding-block: .4rem; position: relative; }
.wp-block-navigation .wp-block-navigation-item__content::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--wp--preset--color--accent-2);
	transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1); }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--wp--preset--color--base); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */
.section { padding-block: var(--wp--preset--spacing--80); padding-inline: var(--wp--preset--spacing--40); }
.content-area { padding-inline: var(--wp--preset--spacing--40); padding-block: var(--wp--preset--spacing--70); }
.landing-content > :where(:not(.alignfull)) { padding-inline: var(--wp--preset--spacing--40); box-sizing: border-box; }
.section-head { margin-bottom: var(--wp--preset--spacing--60); }
.muted, .has-muted-color { color: var(--wp--preset--color--muted); }
.section--alt { background: var(--wp--preset--color--surface); border-block: 1px solid var(--line); }

/* ==========================================================================
   Block style: "Card"  (select a Group > Styles > Card)
   ========================================================================== */
.is-style-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--wp--preset--spacing--50);
}

/* Services: open columns with a top rule instead of boxes */
.service { border-top: 2px solid var(--wp--preset--color--accent); padding-top: var(--wp--preset--spacing--40); }
.service h3 { margin-top: 0; }

/* Quote */
.quote { border-left: 2px solid var(--wp--preset--color--accent-2); padding-left: var(--wp--preset--spacing--50); }
.quote p:first-child { font-family: var(--wp--preset--font-family--display); font-size: 1.35rem; line-height: 1.45; }

/* Call to action panel */
.cta-box {
	border: 1px solid var(--line);
	border-radius: calc(var(--radius) * 1.5);
	padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50);
	background: linear-gradient(135deg, rgba(139,124,255,.18), rgba(62,224,197,.08)), var(--wp--preset--color--surface);
	text-align: center;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.wp-block-button__link { transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s; }
.wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(139,124,255,.35); }
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent; color: var(--wp--preset--color--contrast);
	border: 1px solid rgba(255,255,255,.28);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--accent-2); box-shadow: none; }

/* ==========================================================================
   Portfolio grid
   ========================================================================== */
.portfolio-card { margin: 0; }
.portfolio-card .wp-block-post-featured-image {
	margin: 0 0 1rem; overflow: hidden; border-radius: var(--radius);
	background: var(--wp--preset--color--surface-2); border: 1px solid var(--line);
	aspect-ratio: 4 / 3;
}
.portfolio-card .wp-block-post-featured-image img { transition: transform .6s var(--ease); width: 100%; height: 100% !important; object-fit: cover; }
.portfolio-card:hover .wp-block-post-featured-image img { transform: scale(1.04); }
.portfolio-card .wp-block-post-title { margin: 0 0 .25rem; font-size: 1.2rem; }
.portfolio-card .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.portfolio-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent-2); }
.portfolio-card .wp-block-post-terms { margin: 0; font-size: .9rem; color: var(--wp--preset--color--muted); }
.portfolio-card .wp-block-post-terms a { color: inherit; text-decoration: none; }

/* ==========================================================================
   Footer
   ========================================================================== */
footer.wp-block-template-part { border-top: 1px solid var(--line); background: var(--wp--preset--color--surface); }
.site-footer { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50); }
.site-footer .wp-block-navigation a { color: var(--wp--preset--color--muted); }
.site-footer .wp-block-navigation a:hover { color: var(--wp--preset--color--contrast); }
.site-footer .copyright { color: var(--wp--preset--color--muted); font-size: .875rem; }

/* ==========================================================================
   Light animation
   1) Hero: one soft glow drifting + staggered load-in (class "hero-glow", "load-in")
   2) Optional scroll reveal: add class "reveal" to any block (Advanced > Additional CSS class)
   Everything switches off for people who prefer reduced motion.
   ========================================================================== */
.hero { position: relative; overflow: hidden; isolation: isolate; padding-block: calc(var(--wp--preset--spacing--80) * 1.3); }
.hero-glow::before, .hero-glow::after {
	content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none;
}
.hero-glow::before { width: 520px; height: 520px; top: -180px; right: -80px; background: var(--wp--preset--color--accent); animation: drift 18s ease-in-out infinite alternate; }
.hero-glow::after  { width: 380px; height: 380px; bottom: -160px; left: -60px; background: var(--wp--preset--color--accent-2); opacity: .25; animation: drift 22s ease-in-out infinite alternate-reverse; }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-40px, 30px, 0); } }

.load-in { animation: loadIn .8s var(--ease) both; }
.load-in:nth-child(2) { animation-delay: .12s; }
.load-in:nth-child(3) { animation-delay: .24s; }
.load-in:nth-child(4) { animation-delay: .36s; }
@keyframes loadIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.has-js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.has-js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.has-js .reveal { opacity: 1; transform: none; }
}