/* =====================
 * Theme Name: HF Lite
 * =====================
 * Theme URI: https://hromf.com/theme/hf-lite/
 * Author: H.ROMF (Hiromitsu Fujiki)
 * Author URI: https://hromf.com/about/
 * Description: A minimalist WordPress theme for artists and creators. Elegant typography, whitespace, and silence.
 * Version: 1.1.3
 * License: GPLv2 or later
 * License URI: https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: hf-lite
 * Tags: one-column, accessibility-ready, translation-ready, featured-images, custom-logo, editor-style
 * Requires at least: 6.0
 * Requires PHP: 7.4
 * Tested up to: 6.8
 */


/* =============================================================================
 * HF Lite Theme - Design Tokens
 * ========================================================================== */

:root {
  /* Typography */
  --hf-font-base: 'system-ui', sans-serif;
  --hf-line-height-base: 1.6;
  --hf-color-accent: #0077cc;

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

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

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

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

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

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

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

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

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


/* ==========================================================================
 * Global Body Defaults
 * ========================================================================== */

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


/* ==========================================================================
 * HF Lite Theme - 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-color-mono4);         /* neutral text color */
  text-decoration: none;                /* remove underline by default */
}

/* Hover effect for links */
a:hover {
  text-decoration: underline;           /* subtle reappearance on hover */
}
/* Force visible focus style for links */
.hf-offcanvas-menu a:focus {
  outline: 2px solid yellow;
  outline-offset: 2px;
}
/* Link style override for links inside .hf-container */
.hf-container a {
  color: var(--hf-color-red);           /* theme-specific highlight color */
  text-decoration: underline;           /* ensure visual indication */
}

/* Hover state override inside container */
.hf-container a:hover {
  text-decoration: none;                /* softens hover feedback */
}

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

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


/* ==========================================================================
 * HF Lite Theme - Color Utilities
 * ==========================================================================
 * Utility classes for setting text and background colors.
 * These classes rely on CSS variables to ensure theme-wide consistency
 * and simplify light/dark mode switching.
 * ========================================================================== */

/* Background color utilities */
.hf-bg-base {
  background-color: var(--hf-color-mono);     /* base background, usually light gray */
}

.hf-bg-muted {
  background-color: var(--hf-color-mono1);    /* slightly darker muted background */
}

.hf-bg-dark {
  background-color: var(--hf-color-mono7);    /* dark background (e.g., for footer) */
}

/* Text color utilities */
.hf-color-base {
  color: var(--hf-color-mono);                /* base text color, often white/light */
}

.hf-color-muted {
  color: var(--hf-color-mono4);               /* subdued text color for meta/notes */
}

.hf-color-dark {
  color: var(--hf-color-mono7);               /* dark text, typically for headings */
}

/* ==========================================================================
 * HF Lite Theme - 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-size-h1 {
  font-size: 2rem;        /* ≒ 32px */
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.hf-size-h2 {
  font-size: 1.75rem;     /* ≒ 28px */
  line-height: 1.4;
  font-weight: 400;
}

.hf-size-h3 {
  font-size: 1.5rem;      /* ≒ 24px */
  line-height: 1.5;
  font-weight: 400;
}

.hf-size-h4 {
  font-size: 1.25rem;     /* ≒ 20px */
  line-height: 1.5;
  font-weight: 400;
}

.hf-size-h5 {
  font-size: 1.125rem;    /* ≒ 18px */
  line-height: 1.6;
  font-weight: 400;
}

.hf-size-h6 {
  font-size: 1rem;        /* ≒ 16px */
  line-height: 1.6;
  font-weight: 500;
}

/* Responsive scaling for headings on larger screens (≥ 768px) */
@media (min-width: 768px) {
  .hf-size-h1 { font-size: 2.625rem; }  /* ≒ 42px */
  .hf-size-h2 { font-size: 2.25rem; }   /* ≒ 36px */
  .hf-size-h3 { font-size: 1.875rem; }  /* ≒ 30px */
  .hf-size-h4 { font-size: 1.5rem; }    /* ≒ 24px */
  .hf-size-h5 { font-size: 1.25rem; }   /* ≒ 20px */
  .hf-size-h6 { font-size: 1.125rem; }  /* ≒ 18px */
}

/* ==========================================================================
 * Utility classes for fine-grained font scaling.
 * Based on CSS variables defined in :root for maintainability.
 * ========================================================================== */

.hf-font-xxsmall { font-size: var(--hf-font-size-xxsmall); }  /* ≒ 10px */
.hf-font-xsmall  { font-size: var(--hf-font-size-xsmall); }   /* ≒ 12px */
.hf-font-small   { font-size: var(--hf-font-size-small); }    /* ≒ 14px */
.hf-font-base    { font-size: var(--hf-font-size-base); }     /* ≒ 16px */
.hf-font-medium  { font-size: var(--hf-font-size-medium); }   /* ≒ 18px */
.hf-font-large   { font-size: var(--hf-font-size-large); }    /* ≒ 20px */
.hf-font-xlarge  { font-size: var(--hf-font-size-xlarge); }   /* ≒ 24px */
.hf-font-xxlarge { font-size: var(--hf-font-size-xxlarge); }  /* ≒ 32px */




/* ==========================================================================
 * HF Lite Theme – Padding Utility Classes
 * Provides reusable padding classes for layout control.
 * ========================================================================== */

/* Base padding – all sides */
.hf-pad-none { padding: 0 !important; }
.hf-pad-xs   { padding: 0.5rem !important; }
.hf-pad-sm   { padding: 1rem !important; }
.hf-pad-md   { padding: 2rem !important; }
.hf-pad-lg   { padding: 3rem !important; }

/* Top and bottom padding */
.hf-pt-sm { padding-top: 1rem !important; }
.hf-pt-md { padding-top: 2rem !important; }
.hf-pb-sm { padding-bottom: 1rem !important; }
.hf-pb-md { padding-bottom: 2rem !important; }

/* Left and right padding */
.hf-pl-sm { padding-left: 1rem !important; }
.hf-pr-sm { padding-right: 1rem !important; }

/* Responsive padding */
@media (min-width: 768px) {
  .hf-pad-md-up {
    padding: 2rem !important;
  }
}

@media (max-width: 767px) {
  .hf-pad-md-down {
    padding: 1rem !important;
  }
}

/* Semantic layout-based padding */
.hf-section-pad {
  padding: 4rem 2rem !important;
}

.hf-content-pad {
  padding: 2rem 1rem !important;
}

.hf-block-pad {
  padding: 1.5rem !important;
}


/* ==========================================================================
 * HF Lite Theme - 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-button {
  margin: 0;
  border: none;
  overflow: visible;
  font: inherit;
  color: inherit;
  text-transform: none;
  -webkit-appearance: none;
  border-radius: var(--hf-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-color-mono6);
  color: var(--hf-color-mono);
  border: 1px solid var(--hf-color-mono6);

}

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

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

}

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

/* ==========================================================================
 * HF Lite Theme - 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-container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0;
}

/* Base vertical padding utility (top and bottom spacing) */
.hf-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-container-vpad {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

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

/* ==========================================================================
 * Vertical Padding Size Modifiers
 * ==========================================================================
 * Utility classes for semantic section spacing control.
 * Scales gracefully on larger viewports.
 * ========================================================================== */

/* Extra Small Padding */
.hf-container-vpad-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

/* Small Padding */
.hf-container-vpad-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}

/* Large Padding */
.hf-container-vpad-70 {
  padding-top: 70px;
  padding-bottom: 70px;
}

@media (min-width: 960px) {
  .hf-container-vpad-70 {
    padding-top: 140px;
    padding-bottom: 140px;
  }
}

/* Extra Large Padding */
.hf-container-vpad-140 {
  padding-top: 140px;
  padding-bottom: 140px;
}

@media (min-width: 960px) {
  .hf-container-vpad-140 {
    padding-top: 210px;
    padding-bottom: 210px;
  }
}


/* ==========================================================================
 * HF Lite Theme - Vertical Margin Utilities
 * ==========================================================================
 * Utility classes for applying consistent vertical spacing (top and bottom).
 * Scales with screen size for adaptive spacing across breakpoints.
 * ========================================================================== */

/* Base vertical margins for common spacing needs */
.hf-vmar-20 {
  margin: 20px 0;
}

.hf-vmar-40 {
  margin: 40px 0;
}

.hf-vmar-70 {
  margin: 70px 0;
}

.hf-vmar-140 {
  margin: 140px 0;
}

/* Responsive enhancement for larger screens (≥ 960px) */
@media (min-width: 960px) {
  .hf-vmar-70 {
    margin: 140px 0;
  }

  .hf-vmar-140 {
    margin: 210px 0;
  }
}


/* ==========================================================================
 * HF Lite Theme - 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-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-width img[class*="wp-image"],
.hf-width p > img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

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

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

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

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

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

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

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

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

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

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

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

.hf-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-article-title {
  font-size: 2.23125rem;
  line-height: 1.2;
}
/* Tablet landscape and bigger */
@media (min-width: 960px) {
  .hf-article-title {
    font-size: 2.625rem;
  }
}

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

/* Meta
 ========================================================================== */
.hf-article-meta {
  font-size: 0.875rem;
  line-height: 1.4;
  color: #999;
}
.hf-article-meta a {
  color: #999;
}
.hf-article-meta a:hover {
  color: #666;
  text-decoration: none;
}
/* Content
 ========================================================================== */
.hf-accordion-content {
  display: flow-root;
  margin-top: 20px;
}
/*
 * Remove margin from the last-child
 */
.hf-accordion-content > :last-child {
  margin-bottom: 0;
}


/* ==========================================================================
 * HF Lite Theme - Grid System
 * ==========================================================================
 * Flexible grid layout system using Flexbox.
 * Supports responsive columns, spacing variants, and sidebar/content layout.
 * Designed for both mobile-first and desktop-first rendering strategies.
 * ========================================================================== */

/* Base grid container using flexbox */
.hf-grid {
  display: flex;
  flex-wrap: wrap;
}

/* Standard grid item */
.hf-grid > .hf-grid-item {
  box-sizing: border-box;
}

/* Small gap variant (e.g., 10px spacing between items) */
.hf-grid-small {
  margin-left: -10px;
  margin-top: -10px;
}
.hf-grid-small > .hf-grid-item {
  padding-left: 10px;
  padding-top: 10px;
}

/* Large gap variant (e.g., 40px spacing between items) */
.hf-grid-large {
  margin-left: -40px;
  margin-top: -40px;
}
.hf-grid-large > .hf-grid-item {
  padding-left: 40px;
  padding-top: 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-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-grid-item.content-area {
    width: 66.6667%;
    order: 1;
  }
}

/* ==========================================================================
 * Width Utilities
 * ==========================================================================
 * Utility classes for consistent column widths.
 * Includes static, responsive, and automatic width settings.
 * ========================================================================== */

/* Fixed-width fractions (always apply) */
.hf-w1-1  { width: 100%; }
.hf-w1-2  { width: 50%; }
.hf-w1-3  { width: 33.3333%; }
.hf-w2-3  { width: 66.6667%; }
.hf-w1-4  { width: 25%; }
.hf-w3-4  { width: 75%; }
.hf-w-auto { width: auto; }

/* Default width (mobile first) */
.hf-w1-2-s,
.hf-w1-3-s,
.hf-w1-2-m,
.hf-w1-3-m,
.hf-w1-2-l,
.hf-w1-3-l {
  width: 100%;
  box-sizing: border-box;
}

/* Responsive widths: Small breakpoint (≥ 640px) */
@media (min-width: 640px) {
  .hf-w1-3-s { width: 33.3333%; }
  .hf-w1-2-s { width: 50%; }
}

/* Medium breakpoint (≥ 960px) */
@media (min-width: 960px) {
  .hf-w1-3-m { width: 33.3333%; }
  .hf-w1-2-m { width: 50%; }
}

/* Large breakpoint (≥ 1200px) */
@media (min-width: 1200px) {
  .hf-w1-3-l { width: 33.3333%; }
  .hf-w1-2-l { width: 50%; }
}


/* ========================================================================
   Component: Accordion
 ========================================================================== */
.hf-accordion {
  padding: 0;
  list-style: none;
}
/* Item
 ========================================================================== */
.hf-accordion > :nth-child(n+2) {
  margin-top: 20px;
}

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

.hf-accordion-title {
  display: block;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #333;
  overflow: hidden;
  text-decoration: none;
}
.hf-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-color-mono4);
  margin-right: 0.5em;
  display: inline-block;
}

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

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

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

/* ==========================================================================
 * HF Lite Theme - 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 Lite’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-color-mono2);
  color: var(--hf-color-mono6);
  border-radius: 4px;
}

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

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

a.page-numbers,
a.post-page-numbers
 {
  text-decoration: none;
}
/* ==========================================================================
 * HF Lite Theme - Comment Form Styling
 * ==========================================================================
 * Custom styling for the comment form in HF Lite.
 * Includes label, input, textarea styles.
 * Focused on simplicity, clarity, and accessibility.
 * ========================================================================== */

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

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

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

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

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

.hf-input:focus,
.hf-textarea:focus {
  background: var(--hf-color-mono-1);
  border-color: var(--hf-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-cover-container {
  /* 1 */
  overflow: hidden;
  /* 2 */
  position: relative;
}
/* Size
 ========================================================================== */
.hf-background-cover,
.hf-background-contain,
.hf-background-width-1-1,
.hf-background-height-1-1 {
  background-position: 50% 50%;
  background-repeat: no-repeat;
}
.hf-background-cover {
  background-size: cover;
}
/* Position
 ========================================================================== */
.hf-background-center-center {
  background-position: 50% 50%;
}
/* Repeat
 ========================================================================== */
.hf-background-norepeat {
  background-repeat: no-repeat;
}



/* ==========================================================================
 * HF Lite Theme - Hero Section and Slider
 * ==========================================================================
 * Styles for the hero section with a full-screen background image, 
 * central overlay, and horizontally scrollable image slider.
 * Designed to be immersive, responsive, and touch-friendly.
 * ========================================================================== */

/* Hero container with background image layering */
.hf-hero {
  position: relative;
  overflow: hidden;
}

/* Background image styling for the hero section */
.hf-hero--bg {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}

/* Background image placed via <img> element, fully covering area */
.hf-hero__bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay content with dark translucent layer and center alignment */
.hf-hero__overlay {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  flex-direction: column;
}

/* Content area inside the hero overlay */
.hf-hero__content {
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start; /* left-aligned content */
  padding: 2rem;
}

/* ==========================================================================
 * HF Lite Theme - Slider
 * ==========================================================================
 * Horizontal slider for hero or featured content.
 * Optimized for touch and mouse input. Dot navigation included.
 * ========================================================================== */

/* Slider container */
.hf-slider {
  width: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}

/* Horizontal list of slide items */
.hf-slider__items {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
  position: relative;
  touch-action: pan-x;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.5s ease;
}

/* Individual slide item */
.hf-slider__items > li {
  flex: 0 0 100%;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  color: var(--hf-color-mono);
}

.hf-slider__items > li a {
  color: var(--hf-color-mono);
  text-decoration: none;
}

.hf-slider__items > li a:hover {
  text-decoration: underline;
}

/* Dot-based navigation for slider */
.hf-slider__nav {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
}

.hf-slider__nav li {
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 50%;
  opacity: 0.5;
  cursor: pointer;
}

.hf-slider__nav li.active {
  opacity: 1;
}


/* Directions
 ========================================================================== */
/*
 * 1. Prevent content overflow.
 */
[class*="hf-position-top"] {
  position: absolute;
  max-width: calc(100% - (var(--hf-position-margin-offset) * 2));
  box-sizing: border-box;
}
.hf-position-top {
  top: 0;
  left: 0;
  right: 0;
}

/* ==========================================================================
 *
 *  Navbar Styles
 *
 * ========================================================================== */

/* Navbar wrapper */
.hf-navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 1rem;
  position: relative;
  z-index: 1000;
  overflow: visible;
  color: var(--hf-color-mono7);
  font-family: var(--hf-font-base);
}

/* Sticky header */
.hf-sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: transform 0.3s ease;
}

/* Show header on scroll up */
.hf-show-on-up {
  transform: translateY(0);
}

/* Hide header on scroll down */
.hf-hide-on-down {
  transform: translateY(-100%);
}

/* Always visible header at top */
.hf-always-visible {
  transform: translateY(0);
}

/* Right-side menu container */
.hf-navbar-right {
  display: flex;
  align-items: center;
  overflow: visible;
}

/* Primary menu */
.hf-menu {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.hf-menu li {
  position: relative;
}

.hf-menu > .menu-item > a {
  text-decoration: none;
  color: var(--hf-color-mono5);
  font-weight: 500;
  padding: 0.5rem 0;
  display: inline-block;
  transition: color 0.3s ease;
  border-bottom: 2px solid transparent;
}

.hf-menu > .menu-item:hover > a,
.hf-menu > .current-menu-item > a {
  border-bottom: 2px solid var(--hf-color-mono5);
}

/* Dropdown arrow for menu with children */
.hf-menu li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  margin-left: 0.3em;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  vertical-align: middle;
}

/* Submenu styles */
.hf-menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  background: var(--hf-color-mono7);
  border: 1px solid #eee;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  min-width: 180px;
  border-radius: 5px;
  z-index: 9999;
}

.hf-menu li:hover > ul.sub-menu {
  display: block;
  right: 0;
}

.hf-menu li ul.sub-menu li {
  padding: 0.2rem 0;
}

.hf-menu .sub-menu .sub-menu {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  z-index: 10;
  width: max-content; 
}
/* Front-page menu styling
 ========================================================================== */

.front-page .hf-menu li a {
  color: var(--hf-color-mono1);
}

.front-page .hf-menu li a:hover,
.front-page .hf-menu li.current-menu-item a {
  border-bottom: 2px solid var(--hf-color-mono1);
}


.hf-navbar-right .hf-menu li ul.sub-menu li a {
  padding: 0.5rem 1rem;
  display: block;
  text-decoration: none;
  color: var(--hf-color-mono2);
  white-space: nowrap;
  border-bottom: 2px solid var(--hf-color-mono7);
}

.hf-navbar-right .hf-menu li ul.sub-menu li a:hover {
  border-bottom: 2px solid var(--hf-color-mono3);
}

/* Submenu for mobile (structure only) */
.hf-subnav {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Menu toggle button for mobile */
.hf-menu-toggle {
  display: none;
  width: 32px;
  height: 24px;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 2100;
  padding: 0;
}

.hf-menu-toggle span {
  position: absolute;
  height: 3px;
  width: 100%;
  background-color: var(--hf-color-mono7, #111);
  left: 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.front-page .hf-menu-toggle span {
  background-color: var(--hf-color-mono);
}

.hf-menu-toggle span:nth-child(1) { top: 0; }
.hf-menu-toggle span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.hf-menu-toggle span:nth-child(3) { bottom: 0; }

/* Animation when menu toggle is open */
.hf-menu-toggle.open span:nth-child(1) {
  transform: rotate(45deg);
  top: 50%;
}

.hf-menu-toggle.open span:nth-child(2) {
  opacity: 0;
}

.hf-menu-toggle.open span:nth-child(3) {
  transform: rotate(-45deg);
  bottom: 50%;
}

/* Logo and site name */
.hf-site-branding {
  display: flex;
  align-items: center;
}

.hf-logo img {
  height: 50px;
  width: auto;
  max-width: 100%;
}

/* Offcanvas panel */
.hf-offcanvas {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px;
  height: 100vh;
  color: var(--hf-color-mono7);
  background: var(--hf-color-mono);
  box-shadow: -4px 0 12px rgba(0,0,0,0.1);
  z-index: 2000;
  overflow-y: auto;
  opacity: 0;
  transform: translateX(30px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Container for the close button (within layout flow) */
.hf-close-header {
  display: flex;
  justify-content: flex-end;  /* Align button to the right */
}

/* Close button wrapper */
.hf-offcanvas-close {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* Visual "X" symbol */
.hf-close-x {
  position: relative;
  width: 24px;
  height: 24px;
}

.hf-close-x::before,
.hf-close-x::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 3px;
  background-color: var(--hf-color-mono5);
  transform-origin: center;
}

.hf-close-x::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.hf-close-x::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* "MENU" label under the X */
.hf-close-label {
  font-size: 0.75rem;
  color: var(--hf-color-mono5);
  margin-bottom: 1rem; /* Adds space below the MENU text */
}

/* Reset styles for the entire menu area */
ul.hf-offcanvas-menu,
ul.hf-offcanvas-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul.hf-offcanvas-menu ul {
  padding-left: 0.75rem; 
  margin-top: 0.2rem;
}

ul.hf-offcanvas-menu li {
  padding: 0.2rem 0.3rem;
}

ul.hf-offcanvas-menu ul li::before {
  content: '– ';
  color: var(--hf-color-mono3);
  margin-right: 0.25rem;
}

.hf-offcanvas.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* Content inside offcanvas */
.hf-offcanvas-bar {
  padding: 2rem 1rem;
  text-align: left;
}

/* Overlay for offcanvas */
.hf-offcanvas-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.hf-offcanvas-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Responsive styles */
@media (max-width: 768px) {
  .hf-navbar {
    padding: 0.5rem 0;
    flex-wrap: wrap;
  }

  .hf-menu {
    display: none;
  }

  .hf-menu-toggle {
    display: block;
  }

  .hf-menu.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 1rem;
    gap: 0.5rem;
  }
}

/* ==========================================================================
 * HF Lite Theme - Comment Section Styling
 * ==========================================================================
 * These styles control the appearance of comment headers, lists, pagination,
 * and cookie consent for the WordPress comment system. Clean and accessible.
 * ========================================================================== */
.hf-comment-heading {
  border-bottom: 1px solid var(--hf-color-mono3);
  padding-bottom: 0.5em;
  margin-bottom: 1.5em;
}

.hf-comment-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.hf-comment-list li {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
}

.hf-comment-nav {
  text-align: center;
  margin-top: 2rem;
}

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

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

.hf-pagination-prev a:hover,
.hf-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: #1a1a1a; 
  color: #ccc;
  padding: 2rem 0 0.5rem 0;
}

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

/* ----------------------------------------------------------
  Custom Logo Styling for HF Lite Theme
  - 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 */

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


/* ==========================================================================
 * HF Lite Theme – 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-color-mono2);
}

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

.wp-block-search__button {
  padding-left: 1.2rem;
  padding-right: 1.2rem;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--hf-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-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-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;
}

/* Style for sticky (featured) posts */
.sticky { }

/* Style for captions in galleries */
.gallery-caption { }

/* Style for comments by the post author */
.bypostauthor { }

/* Style for image captions */
.wp-caption-text {
  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;
}

/* Force visible focus style for links */
.hf-offcanvas-menu a:focus {
  outline: 2px solid var(--hf-color-accent, yellow);
  outline-offset: 2px;
}


.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;
}