/*
Theme Name: HF Pro
Theme URI: https://hromf.com/
Author: H.ROMF (Hiromitsu Fujiki)
Author URI: https://hromf.com/
Description: Artist portfolio theme designed to integrate naturally with R_aisonné.
Version: 0.1.7
License: GNU General Public License v2 or later
Text Domain: hf-pro
*/
/* =============================================================================
 * Stylesheet Map
 * 01. Design tokens & global defaults
 * 02. Typography, utilities & buttons
 * 03. Layout, content, grid & sidebar
 * 04. Comments, footer & WordPress core blocks
 * 05. Accessibility & language switcher
 * 06. UIkit overrides & HF Pro integrations
 * ========================================================================== */
/* =============================================================================
 * HF Pro - Design Tokens
 * ========================================================================== */
:root {
  /* Typography */
  --hf-pro-font-base: 'system-ui', sans-serif;
  --hf-pro-line-height-base: 1.6;
  --hf-pro-color-accent: #0077cc;
  --hf-pro-color-base: var(--hf-pro-color-mono);
  --hf-pro-color-muted: var(--hf-pro-color-mono4);

  /* Font Sizes */
  --hf-pro-font-size-xxsmall: 0.625rem;
  --hf-pro-font-size-xsmall: 0.75rem;
  --hf-pro-font-size-small: 0.875rem;
  --hf-pro-font-size-base: 1.075rem;
  --hf-pro-font-size-medium: 1.125rem;
  --hf-pro-font-size-large: 1.25rem;
  --hf-pro-font-size-xlarge: 1.5rem;
  --hf-pro-font-size-xxlarge: 2rem;

  /* Border Radius */
  --hf-pro-radius-none: 0;
  --hf-pro-radius-xs: 2px;
  --hf-pro-radius-sm: 4px;
  --hf-pro-radius-md: 6px;
  --hf-pro-radius-lg: 12px;
  --hf-pro-radius-xl: 20px;
  --hf-pro-radius-full: 9999px;

  /* Color Palette - Light Mode */
  --hf-pro-color-mono-3: #fafafa;
  --hf-pro-color-mono-2: #f5f5f5;
  --hf-pro-color-mono-1: #f1f1f1;
  --hf-pro-color-mono: #eee;
  --hf-pro-color-mono1: #ddd;
  --hf-pro-color-mono2: #bbb;
  --hf-pro-color-mono3: #999;
  --hf-pro-color-mono4: #777;
  --hf-pro-color-mono5: #555;
  --hf-pro-color-mono6: #333;
  --hf-pro-color-mono7: #1f1f1f;

  /* Accent Colors */
  --hf-pro-color-blue: #2a71ae;
  --hf-pro-color-blue-h: #5092cb;
  --hf-pro-color-red: #ab496a;

  /* Button Colors - Light Theme */
  --hf-pro-button-lite-border: var(--hf-pro-color-mono1);
  --hf-pro-button-lite-border-hover: var(--hf-pro-color-mono2);
  --hf-pro-button-lite-border-active: var(--hf-pro-color-mono3);

  /* Button Colors - Dark Theme */
  --hf-pro-button-dark-bg: var(--hf-pro-color-mono6);
  --hf-pro-button-dark-hover: var(--hf-pro-color-mono7);
  --hf-pro-button-dark-active: #080808;
}

html[data-theme="dark"] {
  /* Dark Theme Overrides */
  --hf-pro-color-mono7: #eee;
  --hf-pro-color-mono6: #ddd;
  --hf-pro-color-mono5: #bbb;
  --hf-pro-color-mono4: #999;
  --hf-pro-color-mono3: #777;
  --hf-pro-color-mono2: #555;
  --hf-pro-color-mono1: #444;
  --hf-pro-color-mono: #2a2a2a;
  --hf-pro-color-mono-1: #131313;
  --hf-pro-color-mono-2: #0f0f0f;
  --hf-pro-color-mono-3: #000;

  --hf-pro-button-lite-border: var(--hf-pro-color-mono1);
  --hf-pro-button-lite-border-hover: #888;
  --hf-pro-button-lite-border-active: #aaa;

  --hf-pro-button-dark-bg: #222;
  --hf-pro-button-dark-hover: #151515;
  --hf-pro-button-dark-active: #080808;
}


/* ==========================================================================
 * Global Body Defaults
 * ========================================================================== */
html,
body {
  overflow-x: hidden;
}

body {
  font-family: var(--hf-pro-font-base, 'system-ui', sans-serif);
  font-size: var(--hf-pro-font-size-base);
  /* ~16px base size */
  line-height: var(--hf-pro-line-height-base);
  /* enhanced readability */
  font-weight: 400;
  color: var(--hf-pro-color-mono6);
  /* default text color */
  background-color: var(--hf-pro-color-mono);
  /* default background */
  margin: 0;
}


/* ==========================================================================
 * HF Pro - Link and Typography Styling
 * ==========================================================================
 * Controls default anchor tag styles, including hover behavior.
 * Allows scoped customization for links inside containers.
 * Also defines appearance for muted text and horizontal rules.
 * ========================================================================== */

/* Default link style */
a {
  color: var(--hf-pro-color-mono6);
  text-decoration: dotted underline var(--hf-pro-color-mono1);
  text-underline-offset: 3px;
  transition: all 0.3s ease;
}

a.no-underline {
  text-decoration: none;
}

/* Hover state override inside container */
a:hover {
  color: var(--hf-pro-color-mono3);
  text-decoration: none;
}


/* ナビゲーションやボタン、ウィジェットのリンクからは下線を消す */
.main-navigation a,
.wp-block-button__link,
.widget a {
  text-decoration: none;
}

a:focus,
button:focus,
input[type="text"]:focus,
input[type="submit"]:focus,
textarea:focus,
select:focus {
  outline: 3px solid #000;
  outline-offset: 2px;
}


/* Muted text styles for small or secondary content */
small,
.text-muted {
  color: var(--hf-pro-color-mono4);
  /* subdued gray tone */
}

/* Horizontal rule styling */
hr {
  border-color: var(--hf-pro-color-mono1);
  /* soft line tone for dividers */
}


/* ==========================================================================
 * HF Pro - Color Utilities (used)
 * ========================================================================== */
.hf-pro-bg-base {
  background-color: var(--hf-pro-color-base);
}

.hf-pro-color-muted {
  color: var(--hf-pro-color-muted);
}

/* ==========================================================================
 * HF Pro - Heading Sizes & Font Utilities
 * ==========================================================================
 * Defines responsive heading classes and scalable font-size utilities.
 * Ensures visual hierarchy, readability, and flexibility across devices.
 * ========================================================================== */

/* Headings (H1–H6) with consistent line-height and scalable font sizes */

.hf-pro-size-h1 {
  color: var(--hf-pro-color-mono6);
  font-size: 2rem;
  /* ≒ 32px */
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.hf-pro-size-h2 {
  color: var(--hf-pro-color-mono6);
  font-size: 1.75rem;
  /* ≒ 28px */
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.hf-pro-size-h3 {
  color: var(--hf-pro-color-mono6);
  font-size: 1.5rem;
  /* ≒ 24px */
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.hf-pro-size-h4 {
  color: var(--hf-pro-color-mono6);
  font-size: 1.25rem;
  /* ≒ 20px */
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.hf-pro-size-h5 {
  color: var(--hf-pro-color-mono6);
  font-size: 1.125rem;
  /* ≒ 18px */
  line-height: 1.6;
  font-weight: 400;
  letter-spacing: 0.1em;
}

.hf-pro-size-h6 {
  color: var(--hf-pro-color-mono6);
  font-size: 1rem;
  /* ≒ 16px */
  line-height: 1.6;
  font-weight: 500;
  letter-spacing: 0.1em;
}

/* Responsive scaling for headings on larger screens (≥ 768px) */
@media (min-width: 768px) {
  .hf-pro-size-h1 {
    font-size: 2.625rem;
  }

  /* ≒ 42px */
  .hf-pro-size-h2 {
    font-size: 2.25rem;
  }

  /* ≒ 36px */
  .hf-pro-size-h3 {
    font-size: 1.875rem;
  }

  /* ≒ 30px */
  .hf-pro-size-h4 {
    font-size: 1.5rem;
  }

  /* ≒ 24px */
  .hf-pro-size-h5 {
    font-size: 1.25rem;
  }

  /* ≒ 20px */
  .hf-pro-size-h6 {
    font-size: 1.125rem;
  }

  /* ≒ 18px */
}

/* ==========================================================================
 * HF Pro - Font Utility (used)
 * ========================================================================== */
.hf-pro-font-medium {
  font-size: var(--hf-pro-font-size-medium);
}

/* ==========================================================================
 * HF Pro - Spacing Utilities (used)
 * ========================================================================== */
.hf-pro-vmar-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}

.hf-pro-vmar-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}

.hf-pro-m-large-bottom {
  margin-bottom: 40px !important;
}

@media (min-width: 1200px) {
  .hf-pro-m-large-bottom {
    margin-bottom: 70px !important;
  }
}

.hf-pro-m-remove-bottom {
  margin-bottom: 0 !important;
}

/* ==========================================================================
 * HF Pro - Button Component
 * ==========================================================================
 * Base styles and visual modifiers for buttons.
 * Includes lite and dark variants, as well as size customization.
 * Designed for accessible interaction with consistent spacing and appearance.
 * ========================================================================== */

/* Base button styles */
.hf-pro-button {
  margin: 0;
  border: none;
  overflow: visible;
  font: inherit;
  color: inherit;
  text-transform: none;
  -webkit-appearance: none;
  border-radius: var(--hf-pro-radius-md);
  display: inline-block;
  box-sizing: border-box;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  vertical-align: middle;
  line-height: 38px;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: 0.1s ease-in-out;
  background-color: var(--hf-pro-color-mono6);
  color: var(--hf-pro-color-mono);
  border: 1px solid var(--hf-pro-color-mono6);

}

/* Cursor behavior when enabled */
.hf-pro-button:not(:disabled) {
  cursor: pointer;
}

/* Remove underline on hover */
.hf-pro-button:hover {
  text-decoration: none;
  background-color: var(--hf-pro-color-mono4);
  color: var(--hf-pro-color-mono);
  border-color: var(--hf-pro-color-mono4);

}

/* --- Size Modifiers --- */
.hf-pro-button-small {
  padding: 0 15px;
  line-height: 28px;
  font-size: 0.875rem;
}

.hf-pro-button-large {
  padding: 0 40px;
  line-height: 53px;
  font-size: 0.875rem;
}

/* ==========================================================================
 * HF Pro - Container Layout & Vertical Padding
 * ==========================================================================
 * Defines the max-width layout container and vertical padding utility classes.
 * Provides consistent outer spacing for sections, with responsive scaling.
 * ========================================================================== */

/* Main layout container centered horizontally */
.hf-pro-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
}

/* Base vertical padding utility (top and bottom spacing) */
.hf-pro-container-vpad {
  display: flow-root;
  /* Creates block formatting context */
  box-sizing: border-box;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Enhanced padding on desktop screens (≥ 960px) */
@media (min-width: 960px) {
  .hf-pro-container-vpad {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

/* Remove margin from the last child to avoid extra spacing */
.hf-pro-container-vpad> :last-child {
  margin-bottom: 0;
}

/* ================================================================
 * HF Pro Front Navigation
 * UIkit-compatible presentation
 * ================================================================ */

.hf-pro-position-top {
  top: 0;
  left: 0;
  right: 0;
}

/* Container */

.hf-pro-container {
  display: flow-root;
  box-sizing: content-box;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
}

@media (min-width: 640px) {
  .hf-pro-container {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media (min-width: 960px) {
  .hf-pro-container {
    padding-left: 40px;
    padding-right: 40px;
  }
}

.hf-pro-container> :last-child {
  margin-bottom: 0;
}

.hf-pro-container .hf-pro-container {
  padding-left: 0;
  padding-right: 0;
}

.hf-pro-container-expand {
  max-width: none;
}

/* Navbar */

.hf-pro-navbar {
  display: flex;
  position: relative;
}

.hf-pro-navbar-left,
.hf-pro-navbar-right {
  display: flex;
  gap: 15px;
  align-items: stretch;
  flex-wrap: wrap;
}

.hf-pro-navbar-right {
  margin-left: auto;
}

/* Navbar nav */

.hf-pro-navbar-nav {
  display: flex;
  gap: 15px;
  align-items: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Navbar items */

.hf-pro-navbar-nav>li>a,
.hf-pro-navbar-item,
.hf-pro-navbar-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 0.25em;
  box-sizing: border-box;
  min-height: 80px;
  font-size: 0.9rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-decoration: none;
}

.hf-pro-navbar-nav>li>a {
  height: 100%;
  padding: 0 0;
  text-transform: uppercase;
  transition: 0.1s ease-in-out;
  transition-property: color, background-color;
}

/* Navbar item */

.hf-pro-navbar-item {
  padding: 0 0;
}

.hf-pro-navbar-item> :last-child {
  margin-bottom: 0;
}

/* Navbar toggle */

.hf-pro-navbar-toggle {
  padding: 0 0;
}

.hf-pro-navbar-toggle:hover,
.hf-pro-navbar-toggle[aria-expanded="true"] {
  text-decoration: none;
}

.hf-pro-navbar-toggle:focus,
.hf-pro-navbar-toggle:focus-visible {
  outline: none;
  box-shadow: none;
}

/* Logo */

.hf-pro-logo {
  font-size: 1.5rem;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}

.hf-pro-logo:hover {
  text-decoration: none;
}

.hf-pro-logo :where(img, svg, video) {
  display: block;
}

/* Front Page Text Color */

/* Front Page Navigation Opacity */

.home .hf-pro-navbar-nav>li>a,
.home .hf-pro-navbar-nav>li:hover>a,
.home .hf-pro-navbar-nav>li>a[aria-expanded="true"],
.home .hf-pro-navbar-nav>li>a:active,
.home .hf-pro-navbar-nav>li.current-menu-item>a,
.home .hf-pro-navbar-nav>li.current-menu-ancestor>a {
  opacity: 0.5;
}

.home .hf-pro-logo-front {
  opacity: 0.5;
}

/* Tablet landscape and bigger */

@media (min-width: 960px) {

  .hf-pro-navbar-left,
  .hf-pro-navbar-right {
    gap: 30px;
  }

  .hf-pro-navbar-nav {
    gap: 30px;
  }
}

/* Visibility */

@media (min-width: 960px) {
  .hf-pro-hidden\@m {
    display: none !important;
  }
}

@media (max-width: 959px) {
  .hf-pro-visible\@m {
    display: none !important;
  }
}

/* ==========================================================================
 * HF Pro - Container Width Utilities
 * ==========================================================================
 * Provides responsive container classes with consistent horizontal padding.
 * These classes define maximum content widths and adapt based on screen size.
 * Ideal for controlling layout alignment and readability across devices.
 * ========================================================================== */

/* Base container width with fluid padding */
.hf-pro-width {
  display: flow-root;
  box-sizing: border-box;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  overflow-x: hidden;
  overflow: visible;
}

.hf-pro-width img[class*="wp-image"],
.hf-pro-width p>img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Phone landscape and up (≥ 680px): wider padding */
@media (min-width: 680px) {
  .hf-pro-width {
    padding-left: 30px;
    padding-right: 30px;
  }
}

/* Tablet landscape and up (≥ 1024px): even wider padding */
@media (min-width: 1024px) {
  .hf-pro-width {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Optional override for extra-large screens (≥ 1280px) */
@media (min-width: 1280px) {
  .hf-pro-width {
    padding-left: 40px;
    padding-right: 40px;
  }
}

/* Removes extra margin on last child element */
.hf-pro-width> :last-child {
  margin-bottom: 0;
}

/* Prevents nested .hf-pro-width from double padding */
.hf-pro-width .hf-pro-width {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
 * Width Modifiers
 * ==========================================================================
 * Utility classes to set specific max-width values.
 * ========================================================================== */

.hf-pro-width-small {
  max-width: 768px;
}

.hf-pro-width-compact {
  max-width: 960px;
}

.hf-pro-width-default {
  max-width: 1140px;
}

.hf-pro-width-large {
  max-width: 1280px;
}

.hf-pro-width-xlarge {
  max-width: 1600px;
}

.hf-pro-width-full {
  max-width: none;
  width: 100%;
}

.hf-pro-width-full article>* {
  max-width: 100%
}

/* Image
 ========================================================================== */

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2. figure要素（ブロックエディタ）にも制限 */
figure,
.wp-block-image,
.wp-caption {
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}

/* 3. クラシックエディタのキャプション対応 */
.wp-caption {
  max-width: 100%;
}

.wp-caption img {
  width: 100%;
  height: auto;
  display: block;
}

/* 4. align系のfloat指定とマージン */
.alignleft {
  float: left;
  margin: 0 1em 1em 0;
}

.alignright {
  float: right;
  margin: 0 0 1em 1em;
}

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

/* Title
 ========================================================================== */
.hf-pro-article-title {
  font-size: 2.23125rem;
  line-height: 1.2;
}

/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .hf-pro-article-title {
    font-size: 2.625rem;
  }
}

.hf-pro-site-title a {
  font-size: 1.5rem;
  font-weight: bold;
  color: inherit;
  text-decoration: none;
}

.hf-pro-site-title-front a {
  font-size: 1.5rem;
  font-weight: bold;
  color: inherit;
  text-decoration: none;
}

.force-wrap {
  word-break: break-all;
}

/* Meta
 ========================================================================== */
.hf-pro-article-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #999;
}

.hf-pro-article-meta a {
  color: #999;
}

.hf-pro-article-meta a:hover {
  color: #666;
  text-decoration: none;
}

/* Content
 ========================================================================== */
.hf-pro-accordion-content {
  display: flow-root;
  margin-top: 20px;
}

/*
 * Remove margin from the last-child
 */
.hf-pro-accordion-content> :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
 * HF Pro - Grid
 * ========================================================================== */
.hf-pro-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 0 -30px;
  padding: 0;
  list-style: none;
}

.hf-pro-grid>* {
  box-sizing: border-box;
  margin: 0;
  padding-left: 30px;
}

.hf-pro-grid>*> :last-child {
  margin-bottom: 0;
}

@media (min-width: 1200px) {
  .hf-pro-grid {
    margin-left: -40px;
  }

  .hf-pro-grid>* {
    padding-left: 40px;
  }
}

/* ==========================================================================
 * Sidebar and Content Layout
 * ==========================================================================
 * Responsive layout for content and sidebar columns.
 * Sidebar defaults to below content on mobile and floats right on desktop.
 * ========================================================================== */

/* Sidebar (mobile: full width, desktop: 1/3) */
.sidebar {
  box-sizing: border-box;
  order: 2;
  width: 100%;
  padding-left: 20px;
  padding-top: 20px;
}

/* Main content area */
.hf-pro-grid-item.content-area {
  box-sizing: border-box;
  order: 1;
  width: 100%;
  padding-top: 20px;
}

/* Desktop layout: sidebar on right, content on left */
@media (min-width: 960px) {
  .sidebar {
    width: 33.3333%;
    order: 2;
  }

  .hf-pro-grid-item.content-area {
    width: 66.6667%;
    order: 1;
  }
}

/* ========================================================================
   Component: Accordion
 ========================================================================== */
.hf-pro-accordion {
  padding: 0;
  list-style: none;
}

/* Item
 ========================================================================== */
.hf-pro-accordion> :nth-child(n+2) {
  margin-top: 20px;
}

.hf-pro-accordion a {
  color: var(--hf-pro-color-mono4);
  text-decoration: none;
  list-style-type: disc;
}

.hf-pro-accordion-title {
  display: block;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #333;
  overflow: hidden;
  text-decoration: none;
}

.hf-pro-accordion-title::before {
  content: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2013%2013%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%2213%22%20height%3D%221%22%20x%3D%220%22%20y%3D%226%22%20%2F%3E%0A%20%20%20%20%3Crect%20fill%3D%22%23666%22%20width%3D%221%22%20height%3D%2213%22%20x%3D%226%22%20y%3D%220%22%20%2F%3E%0A%3C%2Fsvg%3E");
  color: var(--hf-pro-color-mono4);
  margin-right: 0.5em;
  display: inline-block;
}

/* Hover */
.hf-pro-accordion-title:hover {
  color: #666;
  text-decoration: none;
}

.hf-pro-accordion-content {
  margin-top: 0.5em;
  padding: 1em;
  background: var(--hf-pro-color-mono);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.5s ease;
}

.hf-pro-accordion-item.is-open .hf-pro-accordion-content {
  max-height: 500px;
  opacity: 1;
}

/* ==========================================================================
 * HF Pro - Pagination Styles
 * ==========================================================================
 * Custom pagination layout based on WordPress native pagination.
 * Utilizes flexbox for alignment and spacing.
 * Compatible with mobile-first responsive design.
 * Styled to match HF Pro’s neutral color scheme.
 * ==========================================================================
 */

/* Outer pagination container */
.pagination {
  margin-top: 10rem;
  text-align: center;
}

/* Links container inside pagination */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* Base style for pagination links */
.page-numbers,
.post-page-numbers {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--hf-pro-color-mono2);
  color: var(--hf-pro-color-mono6);
  border-radius: 4px;
}

/* Style for the current active page number */
.page-numbers.current,
.post-page-numbers.current {
  background-color: var(--hf-pro-color-mono6);
  color: var(--hf-pro-color-mono);
  font-weight: bold;
}

/* Hover effect for pagination links */
.page-numbers:hover,
.post-page-numbers:hover {
  background-color: var(--hf-pro-color-mono3);
  color: var(--hf-pro-color-mono);
}

a.page-numbers,
a.post-page-numbers {
  text-decoration: none;
}

/* ==========================================================================
 * HF Pro - Comment Form Styling
 * ==========================================================================
 * Custom styling for the comment form in HF Pro.
 * Includes label, input, textarea styles.
 * Focused on simplicity, clarity, and accessibility.
 * ========================================================================== */

.hf-pro-form {
  max-width: 640px;
  margin: 0 auto;
  background: var(--hf-pro-color-mono);
}

.hf-pro-form-title {
  font-size: 1rem;
  font-weight: bold;
  color: var(--hf-pro-color-mono2);
  margin-bottom: 1.5rem;
}

.hf-pro-form-group {
  margin-bottom: 1.5rem;
}

.hf-pro-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--hf-pro-color-mono5);
}

.hf-pro-input,
.hf-pro-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid var(--hf-pro-color-mono3);
  border-radius: 5px;
  background: var(--hf-pro-color-mono);
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.hf-pro-input:focus,
.hf-pro-textarea:focus {
  background: var(--hf-pro-color-mono-1);
  border-color: var(--hf-pro-color-accent);
  box-shadow: 0 0 0 3px rgba(0, 119, 204, 0.15);
  outline: none;
}


/* Container
 ========================================================================== */
/*
 * 1. Parent container which clips resized object
 * 2. Needed if the child is positioned absolute. See note above
 */
.hf-pro-cover-container {
  /* 1 */
  overflow: hidden;
  /* 2 */
  position: relative;
}

/* Size
 ========================================================================== */
.hf-pro-background-cover,
.hf-pro-background-contain,
.hf-pro-background-width-1-1,
.hf-pro-background-height-1-1 {
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.hf-pro-background-cover {
  background-size: cover;
}

/* Position
 ========================================================================== */
.hf-pro-background-center-center {
  background-position: 50% 50%;
}

/* Repeat
 ========================================================================== */
.hf-pro-background-norepeat {
  background-repeat: no-repeat;
}



/* ==========================================================================
 * HF Pro - Logo helpers
 * ========================================================================== */
.hf-pro-logo img,
.hf-pro-logo-front img {
  display: block;
  width: auto;
  height: 40px;
  max-width: 100%;
}

/* ==========================================================================
 * HF Pro - Comment Section Styling
 * ==========================================================================
 * These styles control the appearance of comment headers, lists, pagination,
 * and cookie consent for the WordPress comment system. Clean and accessible.
 * ========================================================================== */


/* ======================= ========================================================================== */
/* List
 ========================================================================== */
.hf-pro-comment-list {
  padding: 0;
  list-style: none;
}

/* Adjacent siblings */
.hf-pro-comment-list> :nth-child(n+2) {
  margin-top: 70px;
}

/*
 * Sublists
 * Note: General sibling selector allows reply block between comment and sublist
 */
.hf-pro-comment-list .hf-pro-comment~ul {
  margin: 70px 0 0 0;
  padding-left: 30px;
  list-style: none;
}

.hf-pro-comment-heading {
  color: var(--hf-pro-color-mono6);
  border-bottom: 1px solid var(--hf-pro-color-mono3);
  padding-bottom: 0.5em;
  margin-bottom: 1.5em;
}

/* ========================================================================== */
/* Sections
 ========================================================================== */
.hf-pro-comment-body {
  display: flow-root;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.hf-pro-comment-header {
  display: flow-root;
  margin-bottom: 20px;
}

/*
 * Remove margin from the last-child
 */
.hf-pro-comment-body> :last-child,
.hf-pro-comment-header> :last-child {
  margin-bottom: 0;
}

/* Title
 ========================================================================== */
.hf-pro-comment-title {
  color: var(--hf-pro-color-mono6);
  font-size: 1.25rem;
  line-height: 1.4;
}

/* Meta
 ========================================================================== */
.hf-pro-comment-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--hf-pro-color-mono6);
}

.hf-pro-comment-nav {
  color: var(--hf-pro-color-mono6);
  text-align: center;
  margin-top: 2rem;
}

.hf-pro-pagination {
  display: inline-flex;
  gap: 1rem;
  justify-content: center;
  padding: 0;
  list-style: none;
  margin: 0;
}

.hf-pro-pagination-prev a,
.hf-pro-pagination-next a {
  display: inline-block;
  padding: 0.5rem 1.2rem;
  font-size: 0.95rem;
  background: var(--hf-pro-color-accent, #0077cc);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s ease;
}

.hf-pro-pagination-prev a:hover,
.hf-pro-pagination-next a:hover {
  background: #005fa3;
}


.comment-form-cookies-consent {
  font-size: 0.9rem;
  color: #666;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.comment-form-cookies-consent input[type="checkbox"] {
  transform: scale(1.2);
  margin: 0;
}

/* -------------------------------------------------------
  Footer
------------------------------------------------------- */

footer {
  background-color: #222;
  color: var(--hf-pro-color-mono3);
  padding: 2rem 0 0.5rem 0;
}

footer a {
  color: var(--hf-pro-color-mono3);
  text-decoration: none;
}

footer a:hover {
  color: var(--hf-pro-color-mono);
  text-decoration: underline;
}

.hf-pro-copyright {
  font-size: 0.85rem;
  color: var(--hf-pro-color-mono3);
  text-align: center;
  padding: 1.5rem 0;
  margin-top: 2rem;
}

/* ----------------------------------------------------------
  Custom Logo Styling for HF Pro
  - Ensures that uploaded logo images display at a consistent,
    quiet, and balanced size.
  - Applies to WordPress-generated <img class="custom-logo">
----------------------------------------------------------- */

.custom-logo {
  max-height: 60px;
  /* Prevents the logo from appearing too large */
  height: auto;
  /* Maintains natural aspect ratio */
  width: auto;
  /* Allows horizontal flexibility without distortion */
}

/* If the logo is placed within a UIkit navbar, refine alignment */

.hf-pro-logo .custom-logo {
  vertical-align: middle;
  /* Aligns the logo visually within navigation */
}


/* ==========================================================================
 * HF Pro – Gutenberg Block Styling
 * ==========================================================================
 * Custom styles for core blocks: headings, buttons, forms, layout, etc.
 * Structured by block type for clarity and maintainability.
 * ========================================================================== */


/* ========== Headings ========== */

.wp-block-heading {
  color: inherit;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 1em;
}

.wp-block-heading.has-x-large-font-size {
  font-size: 40px;
}

.wp-block-heading.has-large-font-size {
  font-size: 32px;
}

.wp-block-heading.has-medium-font-size {
  font-size: 24px;
}


/* ========== Buttons ========== */

.wp-block-button__link {
  display: inline-block;
  padding: 0.6em 1.2em;
  background-color: #800000;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.2s ease-in-out;
}

.wp-block-button__link:hover {
  background-color: #a00000;
  color: #fff;
}


/* ========== Search Form ========== */

.wp-block-search__inside-wrapper {
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  border: 1px solid var(--hf-pro-color-mono2);
}

.wp-block-search__input,
.wp-block-search__button {
  border: none;
  border-radius: 0;
  background-color: var(--hf-pro-color-mono-1);
  color: var(--hf-pro-color-mono5);
}

.wp-block-search__button {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--hf-pro-color-mono5);
}


/* ========== Layout Blocks ========== */

/* Columns */
.wp-block-columns {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 2rem;
}

.wp-block-column {
  flex-grow: 1;
  min-width: 0;
}

/* Group */
.wp-block-group {
  padding: 2rem;
  background-color: var(--hf-pro-color-mono-2);
  border-radius: 8px;
  margin-bottom: 2rem;
}


/* ========== Textual Content Blocks ========== */

/* Quote */
.wp-block-quote {
  border-left: 4px solid #ccc;
  padding-left: 1rem;
  margin: 2rem 0;
  font-style: italic;
  color: #555;
}


/* ========== Widget Blocks ========== */

/* Latest Comments – Reset spacing */
.wp-block-group__inner-container,
.wp-block-latest-comments,
.wp-block-latest-comments li {
  margin: 0;
  padding: 0;
}

/* Latest Comments – Meta text */
.wp-block-latest-comments__comment-meta {
  background-color: transparent;
  color: var(--hf-pro-color-mono5);
  font-size: 0.9rem;
  margin-top: 0.25rem;
}

/* Archive & Category Lists */
.wp-block-archives-list,
.wp-block-categories-list {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Style for caption text below images */
.wp-caption-text {
  font-style: italic;
  font-size: 0.875rem;
  color: #666;
  text-align: center;
  margin-top: 0.5em;
}

/* Style for sticky posts */
.sticky {
  border-top: 2px solid #333;
  padding-top: 1em;
}

/* Style for gallery captions */
.gallery-caption {
  font-size: 0.875rem;
  color: #999;
  text-align: center;
  margin-top: 0.5em;
}

/* Style for comments by the post author */
.bypostauthor {
  font-weight: bold;
  border-left: 4px solid #ccc;
  padding-left: 0.5em;
}

/* Visually hidden but accessible to screen readers */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  padding: 10px;
  margin: 0;
  overflow: visible;
  clip: auto;
  background-color: #fff;
  color: #333;
  z-index: 9999;
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
[tabindex]:focus {
  outline: 2px solid #0073aa;
  outline-offset: 2px;
}

a.wp-block-button__link.is-style-outline,
a.wp-block-button__link {
  border-width: 1px;
  border-style: solid;
  transition: all 0.3s ease-in-out;
  padding: 10px;
}

.widget_nav_menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  font-size: 0.875rem;
}

.widget_nav_menu li {
  list-style-type: none;
}

.widget_nav_menu a {
  color: #bbb;
}

.widget_nav_menu a:hover {
  color: #fff;
}

.widget_nav_menu ul.menu>li {
  margin-bottom: 6px;
}

.widget_nav_menu ul.menu>li:last-child {
  margin-bottom: 0;
}

.widget_nav_menu ul.menu>li>a {
  font-size: 1.02em;
  line-height: 1.7;
  color: #c0c0c0;
  text-decoration: none;
}

.widget_nav_menu ul.menu>li>a:hover {
  color: #eee;
}

/* ==========================================================================
   Navbar
   ========================================================================== */
.hf-pro-position-top {
  top: 0;
  left: 0;
  right: 0;
}

/* ==========================================================================
   Language Switcher
   ========================================================================== */

.hf-pro-lang-switcher-container {
  display: inline-block;
}


/* Button */

.hf-pro-lang-switcher-container>.uk-button {
  min-width: 0;
  padding: 0 10px;
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 28px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid currentColor;
  border-radius: 999px;
}

.hf-pro-lang-switcher-container>.uk-button:hover,
.hf-pro-lang-switcher-container>.uk-button:focus {
  color: inherit;
  text-decoration: none;
}


/* Dropdown */

.hf-pro-lang-switcher-container>.uk-dropdown {
  min-width: 150px;
  padding: 14px 18px;
}


/* Lists */

.hf-pro-lang-switcher-container .uk-nav,
.hf-pro-lang-switcher-container .bogo-language-switcher {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.hf-pro-lang-switcher-container .uk-nav>li,
.hf-pro-lang-switcher-container .bogo-language-switcher>li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}


/* Links */

.hf-pro-lang-switcher-container .uk-nav a,
.hf-pro-lang-switcher-container .bogo-language-switcher a {
  display: block;
  padding: 3px 0 !important;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.7;
  text-align: left;
  text-decoration: none !important;
  border: 0 !important;
}

.hf-pro-lang-switcher-container .uk-nav a:hover,
.hf-pro-lang-switcher-container .uk-nav a:focus,
.hf-pro-lang-switcher-container .bogo-language-switcher a:hover,
.hf-pro-lang-switcher-container .bogo-language-switcher a:focus {
  color: #777;
  text-decoration: none !important;
  border: 0 !important;
}


/* Bogo cleanup */

.hf-pro-lang-switcher-container .bogo-language-name {
  margin: 0 !important;
  padding: 0 !important;
}

.hf-pro-lang-switcher-container .bogo-language-name img {
  display: none !important;
}

/* =============================================================================
 * HF Pro - Components & UIkit Overrides
 * ========================================================================== */
a:hover {
  text-decoration: none !important;
}

.uk-table-hover>tr:hover,
.uk-table-hover tbody tr:hover {
  background: var(--hf-pro-color-mono-3, #fafafa);
}

table.uk-table thead tr th,
table.uk-table tbody tr th,
table.uk-table tfoot tr th,
.uk-table th {
  border-bottom: 1px solid var(--hf-pro-color-mono2, #eee) !important;
  color: var(--hf-pro-color-mono4, #555) !important;
  -webkit-text-fill-color: var(--hf-pro-color-mono4, #555) !important;
}

.uk-table-divider>tr:not(:first-child),
.uk-table-divider>tbody>tr:not(:first-child) {
  border-top: 1px solid var(--hf-pro-color-mono1, #eee) !important;
}

.uk-panel .uk-button-default {
  color: var(--hf-pro-color-mono, #f5f5f5) !important;
}

.uk-panel .uk-button-secondary {
  color: var(--hf-pro-color-mono, #f5f5f5) !important;
}

.uk-subnav li a {
  border-radius: 3px !important;
}

.uk-subnav li.uk-active:nth-child(3) a {
  background-color: #8630F0 !important;
}

.uk-subnav li.uk-active:nth-child(4) a {
  background-color: #F03A7F !important;
}

.uk-subnav li.uk-active:nth-child(5) a {
  background-color: #E84DF0 !important;
}

.uk-icon-button {
  background-color: var(--hf-pro-color-mono, #f5f5f5) !important;
}

/* Hover */
.uk-icon-button:hover {
  background-color: var(--hf-pro-color-mono, #f5f5f5) !important;
}

/* OnClick + Active */
.uk-icon-button:active,
.uk-active>.uk-icon-button {
  background-color: var(--hf-pro-color-mono, #f5f5f5) !important;
}

.uk-accordion-title {
  color: var(--hf-pro-color-mono6, #333) !important;
}

.uk-list-divider> :nth-child(n+2) {
  border-top: 1px solid var(--hf-pro-color-mono1, #ddd) !important;
}

.uk-dropdown {
  background-color: var(--hf-pro-color-mono1, #f5f5f5) !important;
}



.hf-pro-breadcrumbs {
  font-size: 0.95em;
  color: var(--hf-pro-color-mono4, #777);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.hf-pro-breadcrumbs a {
  color: var(--hf-pro-color-mono4, #777);
}



.uk-button-secondary {
  background-color: #3a3a3a !important;
}


.hf-pro-button-dark {
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-word;
  line-height: 1.4;
  font-size: 0.9em;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--hf-pro-color-mono, #eeeeee) !important;
  background-color: var(--hf-pro-color-mono6, #2a2a2a) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  border: none !important;
  border-radius: 5px !important;

  text-align: center !important;
  padding: 12px 20px !important;
  text-decoration: none !important;

  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.hf-pro-button-dark:hover {
  background-color: var(--hf-pro-color-mono, #eeeeee) !important;
  color: var(--hf-pro-color-mono6, #2a2a2a) !important;
  text-decoration: none !important;
}

.hf-pro-button-dark:active {
  background-color: var(--hf-pro-color-mono7, #2a2a2a) !important;
  transform: translateY(1px);
}







.uk-navbar-toggle:focus,
.uk-navbar-toggle:focus-visible,
.uk-navbar-toggle:active {
  outline: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* HF Pro front-page logo inversion */
.hf-pro-logo-front.hf-pro-logo-invert img {
  filter: brightness(0) invert(1);
}

/* Custom archive
   ========================================================================== */
.hf-pro-featured-image {
  display: block;
  margin-bottom: 40px;
}

.hf-pro-custom-archive__header {
  margin-bottom: 56px;
}

.hf-pro-custom-archive__description {
  color: var(--hf-pro-color-muted);
}

.hf-pro-custom-archive__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 64px 40px;
}

.hf-pro-custom-archive__card {
  min-width: 0;
}

.hf-pro-custom-archive__image {
  display: block;
  aspect-ratio: 1 / 1;
  margin-bottom: 20px;
  overflow: hidden;
}

.hf-pro-custom-archive__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hf-pro-custom-archive__date,
.hf-pro-custom-archive__excerpt {
  color: var(--hf-pro-color-muted);
  font-size: var(--hf-pro-font-size-small);
}

.hf-pro-custom-archive__title {
  margin: 8px 0;
  font-size: var(--hf-pro-font-size-medium);
  line-height: 1.4;
}

.hf-pro-custom-archive__title a {
  color: inherit;
  text-decoration: none;
}

.hf-pro-custom-archive__pagination {
  margin-top: 64px;
}

@media (max-width: 959px) {
  .hf-pro-custom-archive__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 639px) {
  .hf-pro-custom-archive__grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}