/*
Theme Name: Blokio
Author: Bhavesh
Author URI: https://profiles.wordpress.org/bhavesh456/
Description: A premium, lightweight Full Site Editing theme for modern travel and lifestyle blogs — immersive hero sections, elegant card layouts, and a full block pattern library, with no page-builder dependency.
Version: 1.0.0
Requires at least: 6.8
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: blokio
Tags: blog, entertainment, food-and-drink, one-column, two-columns, right-sidebar, block-patterns, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks

Almost all visual design for Blokio lives in theme.json, which WordPress
compiles into CSS custom properties and per-block styles automatically.
This file only contains what theme.json cannot express: hover/scroll
choreography, the custom block-rendered components (badges, breadcrumbs,
share buttons, related posts), and the dark-mode media-query fallback
for visitors who haven't explicitly picked a Global Styles variation.
*/

/* -------------------------------------------------------------
   Self-hosted fonts
   WordPress.org guidelines require themes to self-host fonts rather
   than load them from a third-party server/CDN (e.g. Google Fonts),
   for user privacy. Place the corresponding .woff2 files in
   assets/fonts/ — see assets/fonts/README.txt for exact filenames.
   ------------------------------------------------------------- */

/* Poppins */
@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins/Poppins-Black.ttf") format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins/Poppins-SemiBold.ttf") format("truetype");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src: url("assets/fonts/Poppins/Poppins-Bold.ttf") format("truetype");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* -------------------------------------------------------------
   Motion & interaction primitives
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .blokio-card,
  .wp-block-post-featured-image img,
  .blokio-badge,
  a.wp-block-navigation-item__content {
    transition:
      transform var(--wp--custom--transition--base),
      box-shadow var(--wp--custom--transition--base),
      background-color var(--wp--custom--transition--base),
      color var(--wp--custom--transition--base);
  }

  .blokio-reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 600ms ease, transform 600ms ease;
  }

  .blokio-reveal.is-visible {
    opacity: 1;
    transform: none;
  }
}

:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 3px;
}

/* -------------------------------------------------------------
   Blog / archive cards
   ------------------------------------------------------------- */
.blokio-card {
  border-radius: var(--wp--custom--radius--md);
  overflow: hidden;
  background: var(--wp--preset--color--surface);
  box-shadow: var(--wp--preset--shadow--card);
}

.blokio-card:hover,
.blokio-card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--wp--preset--shadow--card-hover);
}

.blokio-card .wp-block-post-featured-image {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.blokio-card .wp-block-post-featured-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blokio-card:hover .wp-block-post-featured-image img {
  transform: scale(1.05);
}

.blokio-badge {
  display: inline-block;
  background: var(--wp--preset--color--surface);
  color: var(--wp--preset--color--primary);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
  padding: 0.3em 0.9em;
  border-radius: var(--wp--custom--radius--pill);
  box-shadow: var(--wp--preset--shadow--card);
}

/* -------------------------------------------------------------
   Header: sticky behavior, search popup, mega menu, mobile
   ------------------------------------------------------------- */
.blokio-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--wp--preset--color--surface) 92%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
}

.blokio-header.is-scrolled {
  border-bottom-color: var(--wp--preset--color--border);
  box-shadow: 0 1px 0 rgba(17, 24, 39, 0.02);
}

.blokio-header--transparent {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 40;
  background: transparent;
  border-bottom: none;
}

.blokio-header--transparent .wp-block-navigation-item__content,
.blokio-header--transparent .wp-block-site-title a,
h2.block-heading, h3.block-heading, h4.block-heading, h5.block-heading, h6.block-heading
 {
  color: #fff;
}

.blokio-search-toggle,
.blokio-search-popup__close {
  background: none;
  border: none;
  cursor: pointer;
  color: #fff;
  padding: 0.5rem;
  border-radius: var(--wp--custom--radius--pill);
}

.blokio-search-toggle:hover {
  background: var(--wp--preset--color--background);
}

.blokio-search-popup {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--wp--preset--color--text) 60%, transparent);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
}

.blokio-search-popup.is-open { display: flex; }

.blokio-search-popup__panel {
  background: var(--wp--preset--color--surface);
  border-radius: var(--wp--custom--radius--md);
  box-shadow: var(--wp--preset--shadow--popover);
  width: min(560px, 90vw);
  padding: 1.5rem;
}

.blokio-search-popup .search-form {
  display: flex;
  gap: 0.5rem;
}

.blokio-search-popup input[type="search"] {
  flex: 1;
  font-size: 1.1rem;
  padding: 0.7em 1em;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: var(--wp--custom--radius--sm);
}

/* -------------------------------------------------------------
   Back to top
   ------------------------------------------------------------- */
.blokio-back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 50;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--wp--preset--color--primary);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  box-shadow: var(--wp--preset--shadow--card-hover);
}

.blokio-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* -------------------------------------------------------------
   Breadcrumbs, share buttons, related posts, copyright (shortcode-rendered)
   ------------------------------------------------------------- */
.blokio-breadcrumbs {
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--text-secondary);
}

.blokio-breadcrumbs a { color: inherit; }
.blokio-breadcrumbs a:hover { color: var(--wp--preset--color--primary); }

.blokio-copyright {
  font-size: var(--wp--preset--font-size--small);
  color: #94A3B8;
}

.blokio-related-posts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1rem;
}

.blokio-related-posts__item {
  display: block;
  color: inherit;
}

.blokio-related-posts__thumb {
  border-radius: var(--wp--custom--radius--sm);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 0.5rem;
}

.blokio-related-posts__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blokio-related-posts__title {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  font-size: var(--wp--preset--font-size--small);
}

/* -------------------------------------------------------------
   Instagram gallery pattern
   ------------------------------------------------------------- */
.blokio-instagram-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.5rem;
}

.blokio-instagram-grid .wp-block-image {
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: var(--wp--custom--radius--sm);
  overflow: hidden;
}

.blokio-instagram-grid .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 780px) {
  .blokio-instagram-grid { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------
   FAQ (details/summary — zero JS)
   ------------------------------------------------------------- */
.blokio-faq-item {
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: 1.25rem 0;
}

.blokio-faq-item summary {
  cursor: pointer;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  list-style: none;
}

.blokio-faq-item summary::-webkit-details-marker { display: none; }

.blokio-faq-item summary::after {
  content: "+";
  float: right;
  font-weight: 400;
  color: var(--wp--preset--color--primary);
}

.blokio-faq-item[open] summary::after { content: "\2212"; }

/* -------------------------------------------------------------
   Skip link
   ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--wp--preset--color--primary);
  color: #fff;
  padding: 0.75em 1.25em;
  z-index: 999;
  border-radius: 0 0 var(--wp--custom--radius--sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* -------------------------------------------------------------
   Dark mode fallback for visitors who haven't picked a Global
   Styles variation explicitly (system-level preference).
   ------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  body:not(.blokio-style-light) {
    background: var(--wp--preset--color--dark-background);
    color: var(--wp--preset--color--dark-text)!important;
  }

  body:not(.blokio-style-light) .blokio-card,
  body:not(.blokio-style-light) .blokio-header,
  body:not(.blokio-style-light) .blokio-search-popup__panel {
    background: var(--wp--preset--color--dark-surface);
  }

  body:not(.blokio-style-light) .blokio-badge {
    background: var(--wp--preset--color--dark-surface);
  }
}

ul.wp-block-categories-list
{
  text-decoration: none;
  list-style: none;
}