/* ---------------------------------------------------------------------------------------------

	Theme Name: Björk
    Text Domain: bjork
	Version: 0.2.4
	Description: Björk is a minimal theme for blogs and personal websites. It features a sticky sidebar menu on desktop for quick and easy navigation, and the clean design puts your content front and center. Björk comes with seven different theme styles to choose from, and over 15 different block patterns that you can use to quickly build unique page layouts. Demo: https://andersnoren.se/themes/bjork/
	Tags: blog, portfolio, grid-layout, one-column, two-columns, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, sticky-post, threaded-comments, translation-ready, block-styles, wide-blocks, full-site-editing, left-sidebar
	Author: Anders Norén
	Author URI: https://andersnoren.se
	Theme URI: https://andersnoren.se/teman/bjork-wordpress-theme/
	License: GNU General Public License version 2.0
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Requires PHP: 5.6
	Tested up to: 6.6

	All files, unless otherwise stated, are released under the GNU General Public License
	version 2.0 (http://www.gnu.org/licenses/gpl-2.0.html)

/* --------------------------------------------------------------------------------------------- */


body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

a { text-underline-offset: 0.2em; }

/* Input styles */

input, textarea, select, button {
	background-color: inherit;
	border-radius: 0;
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	margin: 0;
}

input, textarea, select {
	background-color: var( --wp--preset--color--background );
	border: .1rem solid var( --wp--preset--color--tertiary );
	border-radius: .4rem;
	box-sizing: border-box;
	color: var( --wp--preset--color--foreground );
	max-width: 100%;
	padding: .5em;
}

label {
	font-size: var( --wp--preset--font-size--small );
	font-weight: 500;
}

/* Editor Post Title */

.editor-post-title__input { 
	text-align: center;
}

/* Background Padding */

h1.has-background, 
h2.has-background, 
h3.has-background, 
h4.has-background, 
h5.has-background, 
h6.has-background,
p.has-background {
	padding: min( 1em, var( --wp--custom--spacing--small ) );
}

:where(.wp-block-group.has-background) {
	padding: min( 2em, var( --wp--custom--spacing--small ) );
}

/* Alignment Styles */

@media ( max-width: 780px ) {
	.wp-site-blocks > .has-global-padding > .wp-block-columns > .wp-block-column > .wp-block-post-content.has-global-padding > .alignfull {
		margin-left: calc(-1 * var(--wp--style--root--padding-left)) !important;
		margin-right: calc(-1 * var(--wp--style--root--padding-left)) !important;
		width: unset;
	}
}


/* ------------------------------------------- */
/*	Typography
/* ------------------------------------------- */


.has-huge-font-size,
.has-heading-1-font-size,
.has-heading-2-font-size,
.has-heading-3-font-size,
.has-heading-4-font-size,
.has-heading-5-font-size { 
	letter-spacing: var( --wp--custom--typography--letter-spacing--heading );
	line-height: var( --wp--custom--typography--line-height--headings--large ); 
}

.has-gigantic-font-size {
	letter-spacing: var( --wp--custom--typography--letter-spacing--gigantic );
	line-height: var( --wp--custom--typography--line-height--headings--gigantic );
}

.has-medium-font-size {
	line-height: var( --wp--custom--typography--line-height--body );
}


/* ------------------------------------------- */
/* Template Parts
/* ------------------------------------------- */


/* TEMPLATE PART: HEADER */

@media ( min-width: 782px ) {
	:root:not(.editor-styles-wrapper) .site-header { display: none !important; }
}

/* TEMPLATE PART: SIDEBAR */

.site-sidebar {
	display: flex;
	flex-direction: column;
	min-height: calc( 100vh - ( var( --wp--custom--spacing--outer ) * 2 ) );
}

.admin-bar .site-sidebar {
	min-height: calc( 100vh - ( var( --wp--custom--spacing--outer ) * 2 ) - var( --wp-admin--admin-bar--height ) );
}

.site-sidebar > .wp-block-group.is-vertical {
	flex-grow: 1;
	justify-content: space-between;
}

:root:not(.editor-styles-wrapper) .site-sidebar {
	position: sticky;
		top: var( --wp--custom--spacing--outer );
}

@media ( max-width: 781px ) {
	:root:not(.editor-styles-wrapper) .site-sidebar-col { display: none !important; }
}

/* TEMPLATE PART: FOOTER */

@media ( max-width: 500px ) {
	.theme-credit { display: none !important; }
}


/* ------------------------------------------- */
/* Blocks
/* ------------------------------------------- */


/* Block: Avatar ----------------------------- */

.wp-block-avatar img {
	display: block;
}

/* Block: Comments --------------------------- */

#cancel-comment-reply-link {
	font-weight: 500;
	letter-spacing: var(--wp--custom--typography--letter-spacing--body);
}

/* Block: File ------------------------------- */

.wp-block-file {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

:root .wp-block-file__button:not(:only-child) { 
	margin-left: var( --wp--custom--spacing--baseline ); 
}

/* Block: Footnotes -------------------------- */

.wp-block-footnotes {
	box-sizing: border-box;
}

.fn {
	font-size: 13px;
	line-height: 1;
}

.fn a {
	display: inline-flex;
	font-weight: 700;
	padding: 0 .1em;
}

.fn a,
.wp-block-footnotes a[aria-label] {
	opacity: .66;
	text-decoration: none;
}

.fn a:hover,
.wp-block-footnotes a[aria-label]:hover {
	opacity: 1;
}

/* Block: Navigation ------------------------- */

.wp-block-navigation__responsive-container-close svg { transform: scale( 1.25 ); }
.wp-block-navigation__responsive-container-open svg { transform: scale( 1.5, 1.25 ); }

/* Block: Pagination ------------------------- */

.wp-block-query-pagination-numbers {
	display: flex;
	gap: .88em;
}

:root .wp-block-query-pagination-numbers:first-child {
	margin: 0 auto;
	padding-left: 7.5em;
}

:root .wp-block-query-pagination-numbers:last-child {
	margin: 0 auto;
	padding-right: 7.5em;
}

[class^="wp-block-query-pagination-"][class*="-arrow"] {
	color: #fff;
	font-weight: 500;
	text-align: center;
	width: 1.75em;
}

.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	position: relative;
}

.wp-block-query-pagination-previous:before,
.wp-block-query-pagination-next:before {
	background-color: currentColor;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
		top: calc( 50% - .875em );
	height: 1.75em;
	width: 1.75em;
}

.wp-block-query-pagination-previous:before { left: 0; }
.wp-block-query-pagination-next:before { right: 0; }

:root .wp-block-query-pagination-previous-arrow { margin-right: .88em; }
:root .wp-block-query-pagination-next-arrow { margin-left: .88em; }

@media ( max-width: 600px ) {
	.wp-block-query-pagination-numbers:not(:only-child) {
		display: none;
	}
}

/* Block: Paragraph -------------------------- */

.has-drop-cap:not(:focus):first-letter {
	border: .2rem solid currentColor;
    font-size: 2.75em;
    font-weight: var( --wp--custom--typography--font-weight--bold );
	margin: .09em 1rem .5rem 0;
	min-width: .6875em;
	padding: 0.3em;
	text-align: center;
}

/* Block: Post Comments Form ----------------- */

ol.wp-block-comment-template {
	margin: 0;
}

.wp-block-post-comments-form input:not([type=submit]), 
.wp-block-post-comments-form textarea {
	border-color: var( --wp--preset--color--tertiary );
}

.required-field-message,
.comment-notes {
	display: none;
}

.logged-in-as {
	color: var( --wp--preset--color--secondary );
}

.comment-reply-title {
	margin: 0;
}

/* Block: Post Featured Image ---------------- */

.wp-block-post-featured-image img {
	border-radius: 8px;
}

/* Block: Post Navigation -------------------- */

.post-navigation-link-previous a:before { content: "← "; }
.post-navigation-link-next a:after { content: " →"; }

/* Block: Pull Quote ------------------------- */

:root .wp-block-pullquote blockquote p {
	hanging-punctuation: first;
	font-size: inherit;
}

:root .wp-block-pullquote.has-text-align-left, 
:root .wp-block-pullquote.has-text-align-right {
	max-width: 100%;
}

/* Block: Query Pagination ------------------- */

.wp-block-query-pagination > .wp-block-query-pagination-next, 
.wp-block-query-pagination > .wp-block-query-pagination-numbers, 
.wp-block-query-pagination > .wp-block-query-pagination-previous {
	margin-bottom: 0;
}

.wp-block-query-pagination-next:only-child {
	margin-left: auto;
}

/* Block: Separator -------------------------- */

:root hr[class*="is-style-bjork-angled-separator"] {
	background-color: transparent !important;
	background-image: linear-gradient( -45deg, currentColor 25%, transparent 25%, transparent 50%, currentColor 50%, currentColor 75%, transparent 75%, transparent );
    background-size: 5px 5px;
	border: none;
	height: 10px !important;
	max-width: 100%;
}

:root hr.is-style-bjork-angled-separator-wide { width: 100% !important; }

/* Block: Search Form ------------------------ */

.wp-block-search {
	font-size: var( --wp--preset--font-size--small );
}

.wp-block-search .wp-block-search__label {
	font-weight: inherit;
}

.wp-block-search__input {
	margin: 0;
	padding: .75em 1.25em;
}

.wp-block-search__button-inside .wp-block-search__inside-wrapper,
.wp-block-search__button-inside .wp-block-search__input {
	margin: 0;
	padding: .375em .5em !important;
}

.wp-block-search__button { 
	margin: 0 0 0 .75em;
}

::selection {
  background-color: #ffc0cb;
}

/* TEST Link color change over mouse hover 05.11.2025 */ 
a {
  color: inherit !important;
  text-decoration: none !important;
  transition: all 0.25s ease-in-out !important;
  position: relative;
  z-index: 1;
}

a:hover {
  color: #ffffff !important;          /* text turns white */
  background-color: #7a1ba6 !important; /* purple highlight */
}

/* Ensure main content is above the gradient background canvas */
.wp-site-blocks {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------- */
/*  CAN-Style Post Cards (Creative Applications Network aesthetic)
/* ------------------------------------------- */

.can-style-posts .can-cards-grid {
  gap: 1.5em;
}

.can-style-posts .can-card {
  background: transparent;
  border: 3px solid #ffffff;
  border-radius: 6px;
  transition: transform 0.2s ease;
}

.can-style-posts .can-card:hover {
  transform: scale(1.01);
}

/* Featured image - maintain aspect ratio */
.can-style-posts .can-card .wp-block-post-featured-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  margin: 0;
}

/* Light mode - default styling */
.can-style-posts .can-card-content {
  border-top-color: #ffffff !important;
  color: #ffffff;
}

.can-style-posts .can-card-content .wp-block-post-title {
  color: #ffffff;
}

.can-style-posts .can-card-content .wp-block-post-title a {
  color: #ffffff !important;
}

.can-style-posts .wp-block-separator {
  border-color: #ffffff !important;
  background-color: #ffffff !important;
}

.can-style-posts .can-card-meta {
  color: #cccccc;
}

.can-style-posts .can-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.can-style-posts .can-card:hover .wp-block-post-featured-image img {
  transform: scale(1.02);
}

/* Title styling */
.can-style-posts .can-card .wp-block-post-title {
  margin: 0;
  font-family: inherit;
}

.can-style-posts .can-card .wp-block-post-title a {
  text-decoration: none !important;
}

/* Excerpt styling */
.can-style-posts .can-card .wp-block-post-excerpt {
  margin: 0;
  color: #ffffff;
}

.can-style-posts .can-card .wp-block-post-excerpt__excerpt {
  margin: 0;
}

.can-style-posts .can-card .wp-block-post-excerpt:empty {
  display: none;
}

.can-style-posts .can-card .wp-block-post-excerpt:empty + .wp-block-separator {
  display: none;
}

.can-style-posts .can-card .wp-block-post-excerpt__excerpt:empty {
  display: none;
}

/* Meta section - CAN style with letter prefixes */
.can-style-posts .can-card-meta {
  font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace;
  color: #ffffff;
  line-height: 1.6;
}

.can-style-posts .can-card-meta p {
  margin: 0;
}

.can-style-posts .can-meta-row {
  align-items: baseline;
}

.can-style-posts .can-meta-row p {
  min-width: 0.8em;
}

.can-style-posts .can-card-meta a {
  color: inherit !important;
  text-decoration: none !important;
}

.can-style-posts .can-card-meta a:hover {
  background: none !important;
  text-decoration: underline !important;
  color: var(--wp--preset--color--primary, #5857FF) !important;
}

/* Post terms (categories, tags) inline */
.can-style-posts .can-card-meta .wp-block-post-terms {
  display: inline;
}

.can-style-posts .can-card-meta .wp-block-post-terms:empty {
  display: none;
}

.can-style-posts .can-card-meta .wp-block-post-terms a {
  margin-right: 0;
}

/* Post author inline */
.can-style-posts .can-card-meta .wp-block-post-author {
  display: inline;
}

.can-style-posts .can-card-meta .wp-block-post-author__name {
  display: inline;
}

/* Post date inline */
.can-style-posts .can-card-meta .wp-block-post-date {
  display: inline;
}

/* Responsive adjustments */
@media (max-width: 782px) {
  .can-style-posts .wp-block-post-template.is-flex-container {
    flex-direction: column;
  }
  
  .can-style-posts .wp-block-post-template.is-flex-container > li {
    width: 100%;
  }
}

@media (min-width: 783px) and (max-width: 1024px) {
  .can-style-posts .wp-block-post-template.is-flex-container.columns-3 > li {
    width: calc(50% - 0.75em);
  }
}

/* ------------------------------------------- */
/*  CAN-Style Posts Animation
/* ------------------------------------------- */

@keyframes canCardFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.can-style-posts .can-card {
  animation: canCardFadeIn 0.4s ease-in-out forwards;
}

/* Stagger animation from left to right */
.can-style-posts .can-card:nth-child(1) { animation-delay: 0ms; }
.can-style-posts .can-card:nth-child(2) { animation-delay: 60ms; }
.can-style-posts .can-card:nth-child(3) { animation-delay: 120ms; }
.can-style-posts .can-card:nth-child(4) { animation-delay: 180ms; }
.can-style-posts .can-card:nth-child(5) { animation-delay: 240ms; }
.can-style-posts .can-card:nth-child(6) { animation-delay: 300ms; }
.can-style-posts .can-card:nth-child(7) { animation-delay: 360ms; }
.can-style-posts .can-card:nth-child(8) { animation-delay: 420ms; }
.can-style-posts .can-card:nth-child(9) { animation-delay: 480ms; }
.can-style-posts .can-card:nth-child(10) { animation-delay: 540ms; }
.can-style-posts .can-card:nth-child(11) { animation-delay: 600ms; }
.can-style-posts .can-card:nth-child(12) { animation-delay: 660ms; }

/* ------------------------------------------- */
/*  CAN-Style Dark Mode Variant
/* ------------------------------------------- */

.can-style-posts.is-style-bjork-can-dark .can-card {
  border-color: #333333;
  background: #1a1a1a;
}

.can-style-posts.is-style-bjork-can-dark .can-card-content {
  border-top-color: #333333 !important;
  background: #1a1a1a;
  color: #ffffff;
}

.can-style-posts.is-style-bjork-can-dark .can-card-content .wp-block-post-title {
  color: #ffffff;
}

.can-style-posts.is-style-bjork-can-dark .can-card-content .wp-block-post-title a {
  color: #ffffff !important;
}

.can-style-posts.is-style-bjork-can-dark .wp-block-separator {
  border-color: #333333 !important;
  background-color: #333333 !important;
}

.can-style-posts.is-style-bjork-can-dark .can-card-meta {
  color: #cccccc;
}

.can-style-posts.is-style-bjork-can-dark .can-card-meta p {
  color: #ffffff;
}

.can-style-posts.is-style-bjork-can-dark .can-card-meta a {
  color: #cccccc !important;
}

.can-style-posts.is-style-bjork-can-dark .can-card-meta a:hover {
  color: #5857FF !important;
  text-decoration: underline !important;
}

.can-style-posts.is-style-bjork-can-dark .wp-block-post-excerpt {
  color: #aaaaaa;
}