/*
Theme Name: Kubrick 2024
Theme URI: https://roughpixels.ch/themes/kubrick-2024/
Author: Rough Pixels
Author URI: https://roughpixels.ch
Description: Kubrick 2024 is a contemporary reinterpretation of the iconic Kubrick theme, a staple of WordPress's early days. This theme retains the essence of the classic Kubrick design, known for its clean lines and straightforward layout, while infusing it with modern aesthetics and functionality. Designed for today's web, Kubrick 2024 offers a fresh, responsive, and accessible experience, maintaining the core aspects that made the original so beloved. Whether you're a long-time fan of the classic Kubrick or a new user looking for a theme that combines tradition with modernity, Kubrick 2024 is crafted to meet the needs of diverse WordPress users. Embrace the nostalgia and step into the future with a theme that respects its roots while embracing the innovations of the present.
Version: 1.0.3
Tested up to: 6.4
Requires at least: 4.7
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kubrick-2024
Tags: one-column, blog,  left-sidebar, right-sidebar, custom-colors, block-styles, wide-blocks, custom-menu, custom-logo, custom-background, custom-header, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready

Kubrick 2024, (C) 2024 roughpixels.com
Kubrick 2024 is distributed under the terms of the GNU GPL.
*/

/* Table of Contents
====================================================
  Root Variables
  Reset
  Base
  Accessibility
  Layout
  Header
  Footer
  Content
  Comments
  Pages
  Navigation
  Footer Menu
  Back To Top
  Social Menu
  Blog and Post Navigation
  Multi-Page Navigation
  Typography
  Media
  Classic Gallery
  Alignment
  Transitions
  Sidebars
  Widgets
  Plugins
  Form Styles
  Search Modal
  Media Queries
*/

/* Oswald - variable */
@font-face {
  font-family: "Oswald";
  font-display: swap;
  font-style: normal;
  font-weight: 200 700;
  /* Super Modern Browsers */
  src: url("./assets/fonts/Oswald-VariableFont_wght.woff2") format("woff2"),
    /* Modern Browsers */ url("./assets/fonts/Oswald-VariableFont_wght.woff")
      format("woff");
}

/* Root Variables
==================================================== */
:root {
  /* Font Families */
  --kubrick2024-primary-font: "Segoe UI", "Helvetica Neue", Arial, "Noto Sans",
    "Liberation Sans", sans-serif, system-ui, -apple-system, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --kubrick2024-secondary-font: Oswald, Impact, "Segoe UI", "Helvetica Neue",
    "Arial Narrow", "Noto Sans", "Liberation Sans", sans-serif, system-ui,
    -apple-system, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";

  --kubrick2024-serif-font: Georgia, serif;

  /* Colours */
  --kubrick2024-primary: #3f82b9;
  --kubrick2024-secondary: #c8dff7;
  --kubrick2024-tertiary: #c39239;
  --kubrick2024-beige: #cdc0a9;
  --kubrick2024-dark: #2d3136;
  --kubrick2024-body: #f6f2ee;
  --kubrick2024-content-bg: #fff;
  --kubrick2024-text: #595959;
  --kubrick2024-secondary-text: #8f97a0;
  --kubrick2024-headings: #444;
  --kubrick2024-links: #c39239;
  --kubrick2024-hover-links: #c39239;

  --kubrick2024-grey-100: #f8f9fa;
  --kubrick2024-grey-200: #e9ecef;
  --kubrick2024-grey-300: #dee2e6;
  --kubrick2024-grey-400: #ced4da;
  --kubrick2024-grey-500: #adb5bd;
  --kubrick2024-grey-600: #6c757d;
  --kubrick2024-grey-700: #495057;
  --kubrick2024-grey-800: #343a40;
  --kubrick2024-grey-900: #212529;

  --kubrick2024-offcanvas-bg: #fff;
  --kubrick2024-hover-opacity: 0.7;
  --kubrick2024-widget-bg: #f7f7f7;
  --kubrick2024-lines: #dae1e8;

  --kubrick2024-table-header-bg: var(--kubrick2024-grey-700);
  --kubrick2024-table-header-text: #fff;

  /* Shadows */
  --kubrick2024-page-shadow: 0 0.5rem 1.563rem -0.625rem rgba(0, 0, 0, 0.27);
  --kubrick2024-shadow-sm: 0 1.3rem 1rem -1.25rem rgba(0, 0, 0, 0.5);
  --kubrick2024-shadow: 0 1.5rem 1rem -1.25rem rgba(0, 0, 0, 0.4);
  --kubrick2024-shadow-lg: 0 1.75rem 1.25rem -1.25rem rgba(0, 0, 0, 0.4);

  /* Border radius */
  --kubrick2024-border-radius: 0.5rem;

  /* Media */
  --kubrick2024-img-bg: #fff;
  --kubrick2024-img-radius: 0.25rem;
  --kubrick-img-border-color: #ccc;
  --kubrick2024-img-padding: 0.313rem;
  --kubrick2024-img-placeholder-text: 1.125rem;
  --kubrick2024-caption-text: #677179;

  /* Navigation */
  --kubrick2024-nav-bg: #2d3136;
  --kubrick2024-menu-links: #fff;
  --kubrick2024-menu-hover-links: #fff;
  --kubrick2024-submenu-lines: #404449;
  --kubrick2024-submenu-hover-bg: #3f82b9;

  /* Forms */
  --kubrick2024-btn: #3f82b9;
  --kubrick2024-btn-hover: #4c77a6;
}

/* Reset
==================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

.clearfix::after {
  display: block;
  clear: both;
  content: "";
}

/* Base
==================================================== */
html {
  font-size: 15px;
}

body {
  background-color: var(--kubrick2024-body);
  color: var(--kubrick2024-text);
  font-family: var(--kubrick2024-primary-font);
  font-size: 1rem;
  height: 100%;
  line-height: 1.65;
  padding: 0.75rem;
  overflow-x: hidden;
  -ms-word-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* Accessibility
==================================================== */
.screen-reader-text,
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
  position: absolute !important;
}

.skip-link:focus {
  background-color: #000;
  border-radius: 0.188rem;
  box-shadow: 0 0 0.125rem 0.125rem rgba(0, 0, 0, 1);
  clip: auto !important;
  -webkit-clip-path: none;
  clip-path: none;
  color: #fff;
  display: block;
  font-size: 0.875rem;
  font-weight: 700;
  height: auto;
  left: 0.313rem;
  padding: 1rem 1.438rem 0.875rem;
  text-decoration: none;
  top: 0.313rem;
  width: auto;
  z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/* Layout
==================================================== */
.boxed #page,
.container {
  max-width: 1200px;
  max-width: 75rem;
}

#page {
  background: #fff;
  box-shadow: var(--kubrick2024-page-shadow);
  border-radius: var(--kubrick2024-border-radius);
  margin: 0 auto;
  padding: 1.125rem;
}

.header,
.footer {
  width: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  margin: 2.75rem auto 2.75rem;
}

#colophon {
  border-top: 1px solid var(--kubrick2024-lines);
}

/* Header
==================================================== */
.site-header {
  background: linear-gradient(
    to bottom,
    #88bfe8 0%,
    #3f82b9 100%
  ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

  border-radius: 0.5rem 0.5rem 0 0;
  display: flex;
  align-items: center;
  text-align: center;
  padding: 1rem 0;
  background-size: cover;
  background-position: bottom;
  min-height: 400px;
  min-height: 25rem;
}

.header-default .site-header {
  min-height: 16rem;
}

.header-content {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 175px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  padding: 1rem 2rem;
  width: 90%;
}

.header-default .header-content {
  background: none;
}

.site-title,
.site-title a {
  font-family: var(--kubrick2024-secondary-font);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

.header-default .site-title a {
  font-size: 3.5rem;
  font-weight: 700;
}

.site-title,
.site-title a {
  color: #fff;
  text-decoration: none !important;
}

.site-title a:focus,
.site-title a:hover {
  color: #cdc0a9;
  text-decoration: none;
}

.header-default .site-title a:focus,
.header-default .site-title a:hover {
  opacity: 0.8;
}

.site-description {
  color: #9ea2a5;
  text-transform: uppercase;
  font-size: 0.688rem;
  letter-spacing: 2px;
  font-weight: 400;
  position: relative;
}

.site-description::before {
  content: "";
  display: block;
  height: 1px;
  width: 20%;
  background: #babdc0;
  margin: 0.5rem auto;
}

.header-default .site-description {
  color: #fff;
}
.header-default .site-description::before {
  background-color: #fff;
}

@media (max-width: 768px) {
  .header-content {
    height: auto;
  }
}

/* Footer
==================================================== */
.site-info {
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.75rem;
  line-height: 1.3;
  text-align: center;
  margin: 1rem 0 0;
}

.copyright {
  margin-top: 0.5rem;
}

/* Content
==================================================== */
#page-header,
#post-header {
  margin-bottom: 3rem;
}

#page-header {
  text-align: left;
}

.entry-header {
  position: relative;
  text-align: center;
}

.blog-left-sidebar .entry-header,
.blog-right-sidebar .entry-header,
.blog-full-width .entry-header {
  display: flex;
  flex-direction: column;
}

.featured-category-wrap,
.hentry.sticky {
  list-style: none;
  display: inline-flex;
  align-items: center;
  font-size: 1.25rem;
  margin: 0 auto;
  padding: 0;
  position: relative;
  /* Needed for pseudo-elements positioning */
  font-family: var(--kubrick2024-secondary-font);
}

.featured-category-wrap {
  color: var(--kubrick2024-secondary-text);
}

.blog .hentry,
.hentry.sticky,
.archive .hentry,
.search-results .hentry {
  margin-bottom: 4rem;
}

.entry-content {
  font-size: 1rem;
}

/* Classic Kubrick styles */
.blog-classic h2.entry-title,
.post-classic h2.entry-title {
  text-align: left;
  margin-bottom: 0.5rem;
}

.blog-classic .post-meta li:first-child,
.post-classic .post-meta li:first-child {
  margin-left: 0;
}

.blog-classic .top-meta,
.post-classic .top-meta {
  margin-bottom: 1.25rem;
}

.blog-classic .post-meta li,
.post-classic .post-meta li {
  display: inline-block;
  margin-inline: 0.75rem;
}

.blog-classic .featured-category-wrap {
  font-size: inherit;
  font-family: inherit;
  font-weight: 700;
}

.blog-classic .featured-category-wrap::before,
.blog-classic .featured-category-wrap::after {
  content: none;
}

.classic-kubrick-styling .entry-header,
.classic-kubrick-styling h1.entry-title {
  text-align: left;
}

.classic-kubrick-styling h1.entry-title {
  margin-inline: 0;
}

.classic-kubrick-styling ul.post-meta {
  justify-content: start;
}

.classic-kubrick-styling .post-meta li:first-child {
  margin-left: 0;
}

/* Space and add a line between sections */
.single .entry-footer,
.single .entry-content,
.post-author-info,
.comments-area,
.related-posts {
  border-bottom: 1px solid var(--kubrick2024-lines);
  padding-bottom: 2rem;
  margin-bottom: 2rem;
}

.entry-footer {
  clear: both;
  display: flex;
  align-items: center;
  margin-top: 1.5rem;
  position: relative;
}

.hentry.sticky {
  display: block;
  font-family: var(--kubrick2024-primary-font);
  font-weight: 400;
}

.featured-category-wrap::before,
.featured-category-wrap::after {
  content: "";
  display: block;
  width: 4rem;
  /* Length of the horizontal lines */
  border-top: 1px solid var(--kubrick2024-lines);
  /* Creates a 1px border line */
  position: absolute;
  top: 55%;
  /* Middle align */
}

.featured-category-wrap::before {
  left: calc(-4rem - 0.5rem);
  /* Position the line on the left */
}

.featured-category-wrap::after {
  right: calc(-4rem - 0.5rem);
  /* Position the line on the right */
}

/* Post thumbnail */
.post-thumbnail {
  margin: 0 0 2rem;
}

.single .post-thumbnail {
  margin: 0.313rem 0 3rem;
  width: 100%;
}

.single .post-thumbnail img {
  width: 100%;
}

.post-thumbnail a {
  display: block;
  position: relative;
  z-index: 1;
}

.post-thumbnail figcaption.wp-caption-text {
  color: rgba(255, 255, 255, 0.8);
  position: absolute;
  bottom: 0;
  display: block;
  z-index: 2;
  left: 0;
  right: 0;
  margin-bottom: 0;
}

.post-thumbnail figcaption span {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 0.5rem 1.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
}

.no-sidebar figure.post-thumbnail img {
  width: 100%;
}

/* Post info */
.post-meta {
  list-style: none;
  display: flex;
  align-items: center;
  font-size: 0.813rem;
  margin: 0;
  /* We need the container to move to the right */
  padding: 0;
  position: relative;
}

.single .post-meta:not(.post-classic .post-meta),
.search-results .post-meta {
  justify-content: center;
  margin: -1rem 0 1.5rem;
}

.post-meta li {
  display: inline-block;
  margin-inline: 0.5rem;
}

.post-meta li:first-child {
  margin-left: 0.875rem;
}

.post-meta,
.post-meta a {
  color: var(--kubrick2024-secondary-text);
  text-decoration: none;
}

.post-meta a {
  text-decoration: none;
}

.post-meta a {
  text-decoration: none;
}

/* Read more */
.readmore-wrapper {
  display: flex;
  margin: 0;
  padding-right: 1rem;
  position: relative;
}

.readmore-wrapper:after {
  content: "";
  border-right: 1px solid var(--kubrick2024-lines);
  height: 0.875rem;
  position: absolute;
  right: 0;
  top: 0.313rem;
}

.readmore-wrapper svg.svg-icon {
  fill: var(--kubrick2024-tertiary);
  margin-right: 0.438rem;
  position: relative;
  bottom: -0.125rem;
  width: 1.125rem;
  height: 1.125rem;
}

a.readmore-link {
  color: var(--kubrick2024-secondary-text);
  font-size: 0.813rem;
  text-decoration: none;
  text-transform: uppercase;
}

/* Blog and singular styles */
.blog-full-width .entry-title,
.blog-full-width .entry-content,
.blog-full-width .entry-footer,
.post-full-width .entry-title,
.post-full-width .entry-content,
.post-full-width .entry-footer,
.post-full-width .post-author-info,
.post-full-width #comments,
.post-full-width .post-navigation {
  max-width: 53.75rem;
  margin-inline: auto;
}

/* No Sidebar enabled */
.no-sidebar #page-header,
.no-sidebar .entry-header,
.no-sidebar .entry-content,
.no-sidebar .entry-footer {
  max-width: 53.75rem;
  margin-inline: auto;
}

.no-sidebar figure.post-thumbnail {
  width: 100%;
}

/* Post category and tags */
.single .entry-footer {
  align-items: start;
  margin: 0 auto 2rem;
  flex-direction: column;
  padding-bottom: 2rem;
}

.single .entry-footer p {
  margin: 0 0 0.5rem;
  font-size: 0.875rem;
}

.single .entry-footer .svg-icon {
  position: relative;
  bottom: 2px;
  margin-right: 0.5rem;
}

.single .entry-footer > :last-child {
  margin-bottom: 0;
}

.cat-links a,
.tags-links a,
.post-edit-link {
  color: var(--kubrick2024-links);
  line-height: normal;
  display: inline-block;
  word-wrap: break-word;
  text-decoration: none;
  margin-bottom: 0.313rem 0;
  font-weight: 600;
}

.cat-links a:focus,
.cat-links a:hover,
.tags-links a:focus,
.tags-links a:hover,
.post-edit-link:focus,
.post-edit-link:hover {
  color: inherit;
}

/* Post Author Bio */
.post-author-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.post-author-avatar {
  min-width: 5rem;
}

.post-author-description {
  font-size: 0.875rem;
  text-align: center;
}

.post-author-description .svg-icon {
  width: 1rem;
  height: 1rem;
  position: relative;
  bottom: 0.063rem;
}

.post-author-heading {
  font-size: 1.125rem;
  margin: 0 0 0.5rem;
}

.post-author-link {
  color: var(--kubrick2024-links);
  display: inline-block;
  font-size: 0.75rem;
  margin: 1rem 0.5rem 0;
  text-decoration: none;
}

.post-author-link:focus,
.post-author-link:hover {
  color: inherit;
}

/* Comments
==================================================== */

.comments-title {
  margin: 0 0 2rem;
}

.comments-title,
.comment-reply-title {
  font-size: 1.375rem;
}

.comments-title .svg-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.375rem;
  opacity: 0.75;
}

.logged-in-as {
  color: var(--kubrick2024-secondary-text);
  font-size: 0.875rem;
}

.comment > .comment {
  margin-left: 4%;
}

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

.comment {
  margin-bottom: 2.25rem;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.875rem;
}

.comment-avatar,
.comment-author.vcard {
  flex-shrink: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1;
  text-transform: capitalize;
}

.comment-author.vcard .url {
  text-decoration: none;
}

.comment-meta {
  flex-grow: 1;
  padding-left: 0.75rem;
}

.comment-time,
.bypostauthor .by-postauthor {
  font-size: 0.813rem;
  color: var(--kubrick2024-grey-600);
}

a.comment-edit-link {
  color: var(--kubrick2024-grey-600);
  font-size: 0.813rem;
  text-decoration: none;
}

.by-postauthor {
  font-weight: 600;
}

.comment-content {
  font-size: 0.938rem;
}

.comment-content p:last-child {
  margin-bottom: 0.5rem;
}

.comment-reply {
  margin: 1.125rem 0;
}

.comment-reply-link {
  font-size: 12px;
  font-weight: 400;
  color: #151515;
  -webkit-transition: 120ms ease-in;
  transition: 120ms ease-in;
  text-decoration: none;
  border: 1px solid #151515;
  padding: 4px 12px;
}

.comment-reply-link:focus,
.comment-reply-link:hover {
  border-color: var(--kubrick2024-primary);
  background: var(--kubrick2024-primary);
  color: #fff;
}

.required-field-message {
  display: block;
}

.logged-in-as a {
  color: var(--kubrick2024-grey-600);
}

.logged-in-as a:focus,
.logged-in-as a:hover {
  text-decoration: none;
}

.comment-notes {
  font-size: 0.875rem;
  font-style: italic;
  color: var(--kubrick2024-secondary-text);
}

.comment-form-cookies-consent label {
  font-size: 0.875rem;
  color: var(--kubrick2024-grey-600);
  font-style: italic;
}

#wp-comment-cookies-consent {
  position: relative;
  bottom: 0.063rem;
}

.comment-form-comment label {
  font-weight: 600;
}

textarea#comment {
  width: 100%;
}

#commentform .form-submit {
  margin-bottom: 0;
}

/* Pages
==================================================== */
/* 404 */
.page-kubrick2024-header {
  position: relative;
}

.error-title {
  position: relative;
  bottom: 0;
  color: var(--kubrick2024-beige);
  font-family: arial;
  font-size: 26vw;
  line-height: 1;
  font-weight: 700;
  margin: 0;
  text-align: center;
}

.error-404 .page-content {
  position: relative;
  z-index: 2;
  top: -6rem;
  font-weight: 600;
  font-size: 2.25rem;
  text-align: center;
  max-width: 760px;
  margin-inline: auto;
  line-height: 1.2;
}

/* Search Results */
.search-results .page-title {
  text-align: center;
}

.search-results .main-content {
  max-width: 760px;
  margin-inline: auto;
}

/* Navigation
==================================================== */

/* Primary Navigation Styles */
.main-navigation {
  display: none;
}

#nav-container {
  display: flex;
  background: var(--kubrick2024-nav-bg);
  margin-top: 0;
  border-radius: 0 0 0.5rem 0.5rem;
  padding: 0.688rem 1rem;
  justify-content: center;
}

div.nav-menu ul {
  margin-bottom: 0;
  padding: 0;
}

div.nav-menu li {
  display: inline-block;
}

.nav-menu {
  /* Main menu styles (horizontal layout, spacing, etc.) */
  display: flex;
  font-size: 0.875rem;
  list-style: none;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1000;
  text-transform: uppercase;
}

.nav-menu li {
  position: relative;
  margin-inline: 1rem;
  /* Needed for submenu positioning */
}

.nav-menu li ul {
  border-radius: 0 0 0.375rem 0.375rem;
  box-shadow: 0 0.375rem 1rem -0.5rem rgba(0, 0, 0, 0.27);
  font-size: 0.813rem;
  list-style: none;
  position: absolute;
  padding: 1rem 0.25rem 0.25rem;
  top: 100%;
  left: 50%;
  /* Set left position to 50% of parent item */
  transform: translateX(-50%);
  /* Shift horizontally by -50% of own width */
  background: var(--kubrick2024-nav-bg);
  text-transform: capitalize;
  text-align: center;
  width: 13rem;
  /* Width of submenus */
  opacity: 0;
  /* Start with submenu invisible */
  visibility: hidden;
  /* Start the submenu a bit higher */
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
  /* Transition effect for submenu flyouts */
}

.nav-menu li ul ul {
  border-radius: 0.375rem;
  top: 0;
  left: 100%;
  padding: 0.25rem;
  /* Position to the right of the parent submenu */
  transform: translateY(0);
  /* Adjust if necessary */
}

/* Show submenu on hover */
.nav-menu li:hover > ul,
.nav-menu li:focus-within > ul,
.nav-menu li ul li:hover > ul {
  opacity: 1;
  /* Make submenu visible */
  visibility: visible;
  /* Show the submenu */
}

.sub-menu li {
  border-bottom: 1px solid var(--kubrick2024-submenu-lines);
  margin-inline: 0;
}

.sub-menu li:last-child {
  border: none;
}

.sub-menu li a {
  display: flex;
  padding: 0.375rem 0;
  margin: 0;
  justify-content: center;
}

.nav-menu a:hover:not(.sub-menu a:hover) {
  opacity: 0.7;
}

/* Menu link styles */
.nav-menu a {
  text-decoration: none;
  letter-spacing: 0.75px;
  color: var(--kubrick2024-menu-links);
}

.nav-menu a:focus,
.nav-menu a:hover {
  color: var(--kubrick2024-menu-hover-links);
}

.sub-menu a:focus,
.sub-menu a:hover {
  background: var(--kubrick2024-submenu-hover-bg);
  border-radius: 0.375rem;
}

/* Show the offcanvas toggler button in mobile view */
.navbar-toggler {
  cursor: pointer;
  display: flex;
  margin: auto;
}

/* Mobile Menu */
.mobile-nav {
  font-size: 1.188rem;
  padding-left: 0;
}

.mobile-nav ul {
  border-top: 1px solid var(--kubrick2024-submenu-lines);
  font-size: 1rem;
  padding-left: 0;
}

.mobile-nav li {
  border-bottom: 1px solid var(--kubrick2024-submenu-lines);
  list-style: none;
}

.mobile-nav ul,
.mobile-nav li {
  border-color: var(--kubrick2024-grey-300);
}

.mobile-nav li a {
  text-decoration: none;
  padding: 0.25rem 0.5rem;
  display: flex;
  justify-content: start;
}

.mobile-nav ul li a {
  font-weight: 400;
  padding-left: 1.5rem;
}

.mobile-nav ul li ul li a {
  padding-left: 2.25rem;
}

.mobile-nav ul li ul li ul li a {
  padding-left: 3rem;
}

.mobile-nav a {
  color: #000;
  font-weight: 500;
}

.mobile-nav a:focus,
.mobile-nav a:hover {
  background: var(--kubrick2024-submenu-hover-bg);
  border-radius: 0.375rem;
  color: #fff;
}

/* Footer Menu
==================================================== */
.footer-nav {
  display: flex;
  font-size: 0.75rem;
  margin: 0 0 0.25rem;
  padding: 0;
  justify-content: center;
}

.footer-nav ul {
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-nav li {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0;
}

.footer-nav li::after {
  content: "";
  display: block;
  width: 0.188rem;
  height: 0.188rem;
  background: var(--kubrick2024-grey-500);
  border-radius: 50%;
  margin: 0 0.5rem;
  top: 0.063rem;
  position: relative;
}

.footer-nav li:last-child::after {
  content: none;
}

.footer-nav li > a {
  color: inherit;
  position: relative;
  display: inline-block;
  padding: 0;
  text-decoration: none;
}

.footer-nav li > a:focus,
.footer-nav li > a:hover {
  opacity: var(--kubrick2024-hover-opacity);
}

/* Back To Top
==================================================== */
#backToTop {
  background: var(--kubrick2024-beige);
  border: none;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: none;
  cursor: pointer;
  padding: 0.75rem;
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  z-index: 1000;
}

#backToTop:focus,
#backToTop:hover {
  background: var(--kubrick2024-grey-600);
}

#backToTop .svg-icon {
  fill: #fff;
  width: 1.25rem;
  height: 1.25rem;
  bottom: 0;
  display: flex;
  margin-inline: auto;
}

/* Social Menu
==================================================== */
#social-nav {
  list-style: none;
  margin: 0.5rem;
  padding: 0;
  display: flex;
  justify-content: center;
}

#social-nav li {
  margin-inline: 0.375rem;
}

#social-nav span {
  position: absolute;
  left: -10000px;
}

#social-nav a {
  color: var(--kubrick2024-grey-600);
}

#social-nav a:focus,
#social-nav a:hover {
  color: var(--kubrick2024-secondary);
}

#social-nav .svg-icon {
  color: var(--kubrick2024-primary);
  fill: var(--kubrick2024-primary);
  width: 1.5rem;
  height: 1.5rem;
}

#social-nav .svg-icon:focus,
#social-nav .svg-icon:hover {
  color: inherit;
  fill: inherit;
}

/* Blog and Post Navigation
==================================================== */
.pagination {
  display: flex;
  margin-bottom: 2rem;
  margin-top: 3rem;
}

.pagination,
.template-full .pagination,
.template-short .pagination {
  justify-content: center;
}

.pagination .nav-links {
  display: flex;
  gap: 0.25rem;
  line-height: 1;
  align-items: center;
}

.page-numbers {
  border-radius: 0.375rem;
  border: 1px solid var(--kubrick2024-grey-200);
  color: var(--kubrick2024-grey-800);
  padding: 0.75rem;
  position: relative;
  font-size: 0.875rem;
  text-decoration: none;
  width: 3.142857em;
  height: 3.142857em;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prev.page-numbers,
.next.page-numbers {
  background: var(--kubrick2024-grey-100);
}

.page-numbers:focus,
.page-numbers:hover,
.prev.page-numbers:focus,
.next.page-numbers:focus,
.prev.page-numbers:hover,
.next.page-numbers:hover {
  background: var(--kubrick2024-grey-200);
  border-color: var(--kubrick2024-grey-200);
  color: initial;
}

.prev.page-numbers .svg-icon,
.next.page-numbers .svg-icon {
  fill: var(--kubrick2024-grey-600);
  position: relative;
}

.page-numbers.current {
  background-color: var(--kubrick2024-primary);
  border-color: var(--kubrick2024-primary);
  color: #fff;
}

/* Post Navigation */
.post-navigation .nav-links,
.comment-navigation .nav-links {
  display: flex;
  flex-direction: column;
}

.post-navigation .nav-previous,
.post-navigation .nav-next,
.comment-navigation .nav-previous,
.comment-navigation .nav-next {
  flex-basis: 50%;
  margin-bottom: 1rem;
}

.post-navigation .nav-next,
.comment-navigation .nav-next {
  text-align: left;
}

.post-navigation .nav-links > :only-child,
.comment-navigation .nav-links > :only-child {
  flex-basis: 100%;
}

.post-navigation .nav-meta {
  display: inline-block;
  font-family: var(--kubrick2024-secondary-font);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
  position: relative;
  text-transform: uppercase;
}

.post-navigation a {
  text-decoration: none;
}

.post-navigation a:focus,
.post-navigation a:hover {
  color: inherit;
}

.post-navigation a > .nav-meta {
  color: initial;
}

.post-navigation .post-title {
  display: block;
  font-family: var(--kubrick2024-serif-font);
  font-size: 0.938rem;
  font-style: italic;
  line-height: 1.4;
}

.comment-navigation {
  margin-bottom: 1.375rem;
}

/* Multi-Page Navigation
==================================================== */
.multi-page-links {
  clear: both;
  margin: 1rem 0;
  font-size: 0.75rem;
}

.multi-page-links a,
.multi-page-links .post-page-numbers {
  border: 1px solid;
  border-color: rgba(0, 0, 0, 0.3);
  color: inherit;
  padding: 0.188rem 0.5rem;
  border-radius: 0.5rem;
  margin-right: 0.188rem;
  text-decoration: none;
}

.multi-page-links a:focus,
.multi-page-links a:hover,
.post-page-numbers.current {
  background: var(--kubrick2024-secondary);
  border-color: var(--kubrick2024-secondary);

  /*   background: var(--kubrick2024-grey-600);
    border-color: var(--kubrick2024-grey-600); */

  color: #fff;
}

/* Typography
==================================================== */
h1,
h2,
h3,
h4,
h5,
h6,
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: var(--kubrick2024-headings);
  font-family: var(--kubrick2024-secondary-font);
  margin-top: 0;
  margin-bottom: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
}

.entry-content h1 a,
.entry-content h2 a,
.entry-content h3 a,
.entry-content h4 a,
.entry-content h5 a,
.entry-content h6 a {
  color: var(--kubrick2024-links);
  text-decoration: underline;
}

.h1,
h1 {
  font-size: 2rem;
}

.h2,
h2 {
  font-size: 1.75rem;
}

.h3,
h3 {
  font-size: 1.5rem;
}

.h4,
h4 {
  font-size: 1.25rem;
}

.h5,
h5 {
  font-size: 1.125rem;
}

.h6,
h6 {
  font-size: 1rem;
}

.entry-title {
  text-align: center;
  font-size: 2.125rem;
  margin-bottom: 1.5rem;
  text-transform: capitalize;
}

/* Adjust blog title width */
.blog.blog-left-sidebar .entry-title,
.archive.blog-left-sidebar .entry-title,
.blog.blog-right-sidebar .entry-title,
.archive.blog-right-sidebar .entry-title,
.blog.blog-full-width .entry-title,
.archive.blog-full-width .entry-title {
  max-width: 90%;
  margin-inline: auto;
}

#page-header .entry-title {
  text-align: left;
  margin-bottom: 1rem;
}

.archive-prefix {
  color: #cdc0a9;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.3;
}

p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

p:last-child {
  margin-bottom: 0;
}

/* Links */
a {
  color: var(--kubrick2024-links);
  text-underline-offset: 0.188rem;
}

a:focus,
a:hover {
  color: var(--kubrick2024-hover-links);
}

.entry-content p > a:not(.readmore-link) {
  font-weight: 500;
}

p > a:not(.readmore-link):hover,
p > a:not(.readmore-link):focus {
  text-decoration: underline;
  text-decoration-style: dotted;
}

/* Blockquotes */
blockquote,
.blockquote {
  font-family: var(--kubrick2024-serif-font);
  font-size: 1.125rem;
  font-style: italic;
  line-height: 1.3;
  margin: 2rem;
  position: relative;
}

blockquote > :last-child,
.blockquote > :last-child {
  margin-bottom: 0;
}

.blockquote-footer {
  margin-top: -1rem;
  margin-bottom: 1rem;
  font-size: 0.875em;
  color: #6c757d;
}

blockquote::before {
  color: var(--kubrick2024-primary);
  content: "\201C";
  font-family: var(--kubrick2024-serif-font);
  font-size: 18rem;
  line-height: 1;
  position: absolute;
  top: -3rem;
  z-index: 1;
  left: -3rem;
  left: -1.5rem;
  opacity: 0.12;
}

figcaption.blockquote-footer {
  text-align: left;
}

.blockquote-footer::before {
  content: "\2014";
}

/* Lists */
ol,
ul {
  padding-left: 2rem;
}

li > ul {
  padding-left: 1.25rem;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

ul li > ul,
ol li > ol,
ul li > ol,
ol li > ul {
  margin-bottom: 0;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

dl {
  border-top: 1px solid var(--kubrick2024-grey-300);
  display: block;
  margin: 2rem 0;
}

dt {
  font-weight: 700;
}

dd {
  font-style: italic;
  margin-bottom: 0;
  margin-left: 0;
}

dt,
dd {
  border-bottom: 1px solid var(--kubrick2024-grey-300);
  padding: 0.438rem 0;
  font-size: 0.875rem;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline elements */
.mark,
mark {
  padding: 0.188rem;
  color: #222;
  background-color: #fff3cd;
}

.initialism {
  font-size: 90%;
  text-transform: uppercase;
}

code,
kbd,
pre,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  font-size: 0.813rem;
  direction: ltr;
  /* rtl:ignore */
  unicode-bidi: bidi-override;
  font-size: 1em;
}

kbd {
  background: var(--kubrick2024-grey-800);
  border-radius: 0.125rem;
  color: #fff;
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.125rem 0.375rem;
  white-space: nowrap;
  position: relative;
  bottom: 0.125rem;
}

/* Code */
pre {
  background: var(--kubrick2024-grey-100);
  border: 1px solid var(--kubrick2024-grey-300);
  display: block;
  overflow: auto;
  font-size: 0.875rem;
  max-width: 100%;
  margin: 1.5rem 0;
  padding: 1rem;
  white-space: break-spaces;
}

pre code {
  background: transparent;
  font-size: inherit;
  color: inherit;
  padding: 0;
  word-break: normal;
}

code {
  font-size: 0.875em;
  color: #d63384;
  word-wrap: break-word;
}

/* Tables */
table,
th,
td,
.wp-block-table,
.wp-block-table th,
.wp-block-table td {
  border: 1px solid var(--kubrick2024-grey-200);
}

table,
.wp-block-table {
  border-collapse: collapse;
  border-spacing: 0;
  border-width: 1px 0 0 1px;
  margin: 1.5rem 0;
  table-layout: auto;
  width: 100%;
}

table thead,
.table-striped table thead,
.table-striped table tr > th {
  background: var(--kubrick2024-table-header-bg);
  color: var(--kubrick2024-table-header-text);
  font-weight: 500;
}

.table-striped table tr:nth-of-type(odd) {
  background: var(--kubrick2024-grey-100);
}

table th,
table td,
.wp-block-table td,
.wp-block-table th {
  padding: 0.5rem 0.75rem;
  text-align: left;
}

thead td,
.wp-block-table thead td {
  border-color: var(--kubrick2024-grey-600);
}

table td,
.wp-block-table td {
  font-size: 0.938rem;
}

/* Miscellaneous
 ==================================================== */
::selection {
  color: #fff;
  background: var(--kubrick2024-primary);
}

hr,
.wp-block-separator {
  border: none;
  border-bottom: 0.125rem solid var(--kubrick2024-grey-400);
  margin: 3rem auto;
}

/* Media
 ==================================================== */
figure {
  display: inline-block;
  margin: 0 0 1rem;
  position: relative;
}

.blog-full-width .post-thumbnail {
  display: block;
}

.wp-block-image figcaption,
figcaption,
.wp-caption-text {
  font-size: 0.938rem;
  color: var(--kubrick2024-caption-text);
  margin: 0.5rem 0;
  line-height: 1.2;
  text-align: center;
}

img {
  border-radius: 0.5rem;
  /* Responsive images */
  max-width: 100%;
  height: auto;
}

img,
svg {
  vertical-align: middle;
}

.img-box {
  padding: var(--kubrick2024-img-padding);
  background-color: var(--kubrick2024-img-bg);
  border: 1px solid var(--kubrick-img-border-color);
  border-radius: var(--kubrick2024-img-radius);
  max-width: 100%;
  height: auto;
}

.img-placeholder-text {
  font-size: var(--kubrick2024-img-placeholder-text);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  text-anchor: middle;
}

/* Classic Gallery
 ==================================================== */
.gallery {
  display: grid;
  gap: 10px; /* Space between images */
  grid-template-columns: repeat(1, 1fr); /* 1 column on small screens */
  margin: 3rem 0 1rem;
}

/* Gallery item styles */
.gallery-item {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

/* Gallery image link */
.gallery-item a {
  display: block;
  border: none;
  padding: 0;
}

/* Gallery image */
.gallery-item img {
  width: 100%;
  height: auto;
  border: 2px solid #f0f0f0; /* Light gray border */
}

/* Clearfix for the gallery */
.gallery:after {
  content: "";
  display: table;
  clear: both;
}

/* Alignment
 ==================================================== */
.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.wp-block-gallery.alignleft,
.wp-block-image .alignleft,
.alignleft,
.float-start {
  float: left;
  margin: 0.375rem 2rem 0.5rem 0;
}

.wp-block-gallery.alignright,
.wp-block-image .alignright,
.alignright,
.float-end {
  float: right;
  margin: 0.375rem 0 0.5rem 2rem;
}

.wp-block-image .aligncenter,
.aligncenter,
.float-center {
  margin: 1rem auto;
}

.wp-block-image .alignnone,
.alignnone,
.float-none {
  float: none;
}

/* Transitions
==================================================== */
a,
a::after,
a::before,
input,
textarea,
button,
select {
  transition: all 0.2s ease-out;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

button,
input[type="submit"],
input[type="button"],
input[type="reset"] {
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"] {
    transition: none;
  }
}

/* Sidebars
 ==================================================== */
#top-sidebar {
  background: #fff;
  box-shadow: var(--kubrick2024-page-shadow);
  border-radius: var(--kubrick2024-border-radius);
  max-width: 1200px;
  margin: 0 auto 1.5rem;
  padding: 1.125rem;
  text-align: center;
}

#breadcrumb-sidebar {
  padding: 1rem 0 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--kubrick2024-secondary-text);
}

#breadcrumb-sidebar a {
  color: initial;
  text-decoration: none;
}

#bottom-sidebar {
  background-color: var(--kubrick2024-widget-bg);
  border-radius: var(--kubrick2024-border-radius);
  display: grid;
  /* gap: 1.25rem;  Adjust the space between widgets */
  margin-bottom: 3rem;
}

/* Styles for different numbers of widgets */
.bottom-sidebar-grid-1,
.bottom-sidebar-grid-2,
.bottom-sidebar-grid-3,
.bottom-sidebar-grid-4 {
  grid-template-columns: repeat(1, 1fr); /* Default for mobile: 1 column */
}

.footer-widget {
  padding: 2rem 0 1rem;
}

#footer-sidebar.widget-area {
  max-width: 100%;
  margin-inline: auto;
  text-align: center;
}

/* Widgets
 ==================================================== */
.hide-widget-title {
  display: none;
}

#sidebar-column .widget {
  margin-bottom: 3rem;
}

.widget {
  background-color: var(--kubrick2024-widget-bg);
  padding: 2.5rem;
  border-radius: var(--kubrick2024-border-radius);
}

#footer-sidebar .widget {
  padding: 2.5rem 0 1rem;
}

#bottom-sidebar .widget,
#footer-sidebar .widget {
  background-color: transparent;
}

.widget-area {
  font-size: 90%;
}

.widget-title {
  font-size: 1.125rem;
  text-transform: uppercase;
}

.widget-area ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget-area ul > li {
  border-bottom: 1px solid var(--kubrick2024-lines);
  padding: 0.5rem 0;
}

.widget-area li > a,
.widget_tag_cloud a {
  color: inherit;
  text-decoration: none;
}

.widget-area li > a:focus,
.widget-area li > a:hover,
.widget_tag_cloud a:focus,
.widget_tag_cloud a:hover {
  color: var(--kubrick2024-hover-links);
  text-decoration: underline;
  text-underline-offset: 0.188rem;
}

.widget-area li:last-child {
  border: none;
  padding-bottom: 0;
}

.widget .post-date {
  font-size: small;
  font-style: italic;
  color: var(--kubrick2024-secondary-text);
}

/* Widget Menus */
.widget_nav_menu .sub-menu li > a {
  display: block;
  padding: 0;
}

.widget_nav_menu .sub-menu {
  border-top: 1px solid var(--kubrick2024-lines);
  margin-top: 0.5rem;
  padding-left: 1rem;
}
.widget_nav_menu li:last-child {
  border: none;
  padding-bottom: 0;
}

.widget_nav_menu .sub-menu li > a:focus,
.widget_nav_menu .sub-menu li > a:hover {
  background: none;
}

/* Widget Tagcloud */
.widget_tag_cloud a {
  display: inline-block;
  font-size: 100% !important;
  text-decoration: none;
  margin: 0 0 0.25rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--kubrick2024-lines);
  display: inline-flex;
  align-items: center;
  font-size: 87% !important;
  border-radius: 0.188rem;
}

.widget_tag_cloud a:focus,
.widget_tag_cloud a:hover {
  border-color: var(--kubrick2024-hover-links);
  text-decoration: none;
}

/* Widget Recent Entries */
.widget_recent_entries li {
  font-family: var(--kubrick2024-secondary-font);
  font-weight: 500;
}

.widget_recent_entries li .post-date {
  font-family: inherit;
  font-family: var(--kubrick2024-primary-font);
  font-style: normal;
  display: block;
}

/* Widget Comments */
.widget_recent_comments .comment-author-link {
  font-weight: 600;
}

.widget_recent_comments .recentcomments a {
  font-style: italic;
}

/* Widget Calendar */
.widget_calendar .wp-calendar-table {
  width: 100%;
}
.wp-calendar-table caption {
  font-family: var(--kubrick2024-secondary-font);
  font-size: 1.125rem;
  margin-bottom: 0.375rem;
}
.wp-calendar-table thead th {
  border: none;
  border-bottom-width: 2rem;
  padding: 0.125rem 0;
}
.wp-calendar-table .pad {
  border: none;
}
.wp-calendar-table .wp-calendar-nav {
  padding: 0 0.25rem;
}

.wp-calendar-table thead th,
.wp-calendar-nav {
  background: var(--kubrick2024-grey-200);
}

.widget_calendar td {
  text-align: center;
  padding: 0.25rem;
  border: 1px solid var(--kubrick2024-lines);
}

.wp-calendar-nav {
  padding: 0.125rem 0.5rem;
}

.wp-calendar-nav a {
  display: inline-block;
  color: inherit;
  border: 1px solid var(--kubrick2024-grey-500);
  font-family: var(--kubrick2024-secondary-font);
  padding: 0 0.5rem;
  border-radius: 0.125rem;
  text-decoration: none;
  font-size: 80%;
  text-transform: uppercase;
}

.wp-calendar-nav a:focus,
.wp-calendar-nav a:hover {
  border-color: var(--kubrick2024-hover-links);
  color: var(--kubrick2024-hover-links);
}

/* Plugins - Featherlight lightbox
==================================================== */
.featherlight-image {
  border-radius: 0.5rem 0.5rem 0 0;
}

.featherlight .featherlight-content .caption {
  display: block;
  background: #000;
  font-size: 90%;
  width: 100%;
  padding: 0.5rem;
  border-radius: 0 0 0.5rem 0.5rem;
}

/* Form Styles
==================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
select {
  display: block;
  width: 100%; /* Full width for standalone use */
  padding: 0.375rem 1rem; /* Same padding as buttons */
  font-size: 1rem; /* Same font size as buttons */
  font-weight: 400; /* Same font weight as buttons */
  line-height: 1.5; /* Same line height as buttons */
  color: #495057; /* Slightly darker text for better contrast */
  background-color: #fff; /* White background */
  background-clip: padding-box;
  border: 1px solid #ced4da; /* Light grey border */
  border-radius: 0.313rem; /* Same border-radius as buttons */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); /* Subtle inner shadow */
  font-family: var(--kubrick2024-primary-font); /* Consistent font family */
}

textarea {
  display: block;
  width: 100%; /* Full width for standalone use */
  padding: 0.375rem 1rem; /* Same padding as buttons and inputs */
  font-size: 1rem; /* Same font size as buttons and inputs */
  font-weight: 400; /* Same font weight as buttons and inputs */
  line-height: 1.5; /* Same line height as buttons and inputs */
  color: #495057; /* Slightly darker text for better contrast */
  background-color: #fff; /* White background */
  background-clip: padding-box;
  border: 1px solid #ced4da; /* Light grey border */
  border-radius: 0.313rem; /* Same border-radius as buttons and inputs */
  font-family: var(--kubrick2024-primary-font); /* Consistent font family */
  height: auto; /* Auto height to accommodate content */
  resize: vertical; /* Allow vertical resizing */
}

/* Adjustments for disabled state */
textarea:disabled {
  background-color: #e9ecef;
  opacity: 1;
}

button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
  color: #495057;
  background-color: #fff;
  border-color: var(--kubrick2024-grey-400); /* Grey colour on focus */
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.125); /* Light to medium grey glow */
}

.menu-item-search button:focus {
  box-shadow: 0 0 0 0.125rem rgba(108, 117, 125, 0.75); /* Light to medium grey glow */
}
/* Adjustments for disabled state */
input[type="text"]:disabled,
input[type="password"]:disabled,
input[type="email"]:disabled,
input[type="number"]:disabled,
input[type="search"]:disabled,
input[type="tel"]:disabled,
input[type="url"]:disabled,
select:disabled {
  background-color: #e9ecef;
  opacity: 1;
}

/* Buttons */
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
.wp-block-button__link,
.wp-block-file a,
.wp-block-file__button {
  background-color: var(--kubrick2024-primary);
  display: inline-block;
  padding: 0.375rem 1rem;
  font-family: var(--kubrick2024-secondary-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #fff;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  border-radius: 0.313rem;
}

.wp-block-button .wp-block-button__link.is-style-outline,
.wp-block-button.is-style-outline > .wp-block-button__link {
  border: 1px solid var(--kubrick2024-grey-400);
  border-radius: 0.313rem !important;
  line-height: 1.5;
  padding: 0.375rem 1rem;
}

/* Hover and focus states */
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
.wp-block-button__link:hover,
.wp-block-button .wp-block-button__link.is-style-outline:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
.wp-block-button__link:focus,
.wp-block-button .wp-block-button__link.is-style-outline:focus,
.wp-block-button.is-style-outline > .wp-block-button__link:focus,
.wp-block-file a:focus,
.wp-block-file__button:focus,
.wp-block-file a:hover,
.wp-block-file__button:hover {
  color: #fff;
  background-color: var(--kubrick2024-btn-hover);
  border-color: var(--kubrick2024-btn-hover);
}

/* Form icons */
.button .svg-icon {
  bottom: 2px;
  position: relative;
  fill: #fff;
}

/* Style the input-group container */
.input-group {
  display: flex;
  align-items: stretch; /* Align the elements vertically */
}

/* Style the search input within the input-group */
.input-group input[type="search"] {
  flex-grow: 1; /* Input takes available space */
  border-radius: 0.313rem 0 0 0.313rem; /* Rounded corners on the left side */
  margin-bottom: 0; /* Remove any default margin */
}

/* Style the search button within the input-group */
.input-group button {
  border-radius: 0 0.313rem 0.313rem 0; /* Rounded corners on the right side */
}

/* Adjustments for focus state to maintain visual connection */
.input-group button:focus,
.input-group button:hover,
.input-group input[type="search"]:focus,
.input-group input[type="submit"]:focus {
  z-index: 1; /* Ensure focused element is on top */
}

/* Search Modal
 ==================================================== */
.menu-item-search button {
  padding: 0;
  background: none;
  line-height: 1;
  border: none;
  width: 1.25rem;
  height: 1.25rem;
  font-size: inherit;
}

li.menu-item-search {
  margin-left: 0.5rem;
  display: none;
}

.menu-item-search button:focus,
.menu-item-search button:hover {
  background: transparent;
}

.searchModal-btn .svg-icon {
  fill: #fff;
  color: currentColor;
  position: relative;
  top: 0.063rem;
}

.searchModal-close-x {
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  cursor: pointer;
  padding: 1rem;
  width: 3rem;
  height: 3rem;
  display: flex;
}

.modal-body .button {
  background: var(--kubrick2024-primary);
  border-color: var(--kubrick2024-primary);
}

.searchModal-btn:focus,
.searchModal-btn:hover,
.searchModal-close-x:focus,
.searchModal-close-x:hover,
.modal-body .button:focus,
.modal-body .button:hover {
  background-color: var(--kubrick2024-btn-hover);
  border-color: var(--kubrick2024-btn-hover);
}

.searchModal-btn .svg-icon:focus,
.searchModal-btn .svg-icon:hover,
.searchModal-btn:focus .svg-icon,
.searchModal-btn:hover .svg-icon,
.searchModal-close-x:focus .svg-icon,
.searchModal-close-x:hover .svg-icon {
  fill: #fff;
}

.searchModal-btn,
.searchModal-close-btn {
  cursor: pointer;
}

.searchModal-close-x .svg-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1100;
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

/* This stops the browser scrollbar being removed */
.modal.show {
  overflow-y: scroll;
  overflow-x: hidden;
}

.modal-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.modal.fade .modal-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

@media (prefers-reduced-motion: reduce) {
  .modal.fade .modal-dialog {
    transition: none;
  }
}

.modal.show .modal-dialog {
  transform: none;
}

.modal.modal-static .modal-dialog {
  transform: scale(1.02);
}

.modal-dialog-scrollable {
  height: calc(100% - 0.5rem * 2);
}

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow: hidden;
}

.modal-dialog-scrollable .modal-body {
  overflow-y: auto;
}

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-height: calc(100% - 0.5rem * 2);
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--kubrick2024-grey-800);
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid var(--kubrick2024-grey-200);
  border-radius: 0.25rem;
  outline: 0;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100vw;
  height: 100vh;
  background: #000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop.show {
  opacity: 0.8;
}

.modal-header {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid var(--kubrick2024-grey-300);
  border-top-left-radius: calc(0.5rem - 1px);
  border-top-right-radius: calc(0.5rem - 1px);
}

.modal-header .btn-close {
  padding: calc(1rem * 0.5) calc(1 * 0.5);
  margin: calc(-0.5 * 1rem) calc(-0.5 * 1) calc(-0.5 * 1rem) auto;
}

.search-wrap .svg-icon {
  fill: #fff;
}

.modal-title {
  margin: 0;
  line-height: 1.5;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.modal-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: calc(1rem - 0.5rem * 0.5);
  background-color: var(--kubrick2024-white);
  border-top: 1px solid var(--kubrick2024-grey-300);
  border-bottom-right-radius: calc(0.5rem - 1px);
  border-bottom-left-radius: calc(0.5rem - 1px);
}

.modal-footer > * {
  margin: calc(0.5rem * 0.5);
}

@media (min-width: 576px) {
  .modal {
    margin: 0;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
  }

  .modal-dialog {
    max-width: 500px;
    margin-right: auto;
    margin-left: auto;
  }
}

/* Block Styles
 ==================================================== */

.wp-block-gallery,
.wp-block-media-text,
.wp-block-columns,
.wp-block-cover {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.wp-block-image {
  margin: auto;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
  border-radius: 0 0 0.5rem 0.5rem;
}

.left-sidebar .wp-block-image .alignleft,
.left-sidebar .wp-block-image .alignright,
.right-sidebar .wp-block-image .alignleft,
.right-sidebar .wp-block-image .alignright {
  max-width: 50%;
}

/* Drop cap */
.has-drop-cap:not(:focus):first-letter {
  color: var(--kubrick2024-primary);
  float: left;
  font-size: 6rem;
  line-height: 0.75;
  margin: 0.25rem 1rem 0 0;
  text-transform: uppercase;
  font-family: var(--kubrick2024-serif-font);
  font-style: normal;
  font-weight: 700;
}

/* Block text colours */

.has-dark-background-color {
  background: var(--kubrick2024-dark);
}

.has-white-background-color {
  background: #fff;
}

.has-beige-background-color {
  background: #cdc0a9;
}
.has-primary-background-color {
  background: var(--kubrick2024-primary);
}

.has-secondary-background-color {
  background: var(--kubrick2024-secondary);
}

.has-tertiary-background-color {
  background: var(--kubrick2024-tertiary);
}

.has-dark-color,
.has-dark-color .has-inline-color {
  color: var(--kubrick2024-dark);
}

.has-beige-color,
.has-beige-color .has-inline-color {
  color: #cdc0a9;
}
.has-white-color,
.has-white-color .has-inline-color {
  color: #fff;
}

.has-primary-color,
.has-primary .has-inline-color {
  color: var(--kubrick2024-primary);
}

.has-secondary-color,
.has-secondary-color .has-inline-color {
  color: var(--kubrick2024-secondary);
}

.has-tertiary-color,
.has-tertiary .has-inline-color {
  color: var(--kubrick2024-tertiary);
}

/* Text Sizing */
.has-extra-small-font-size {
  font-size: 0.875rem;
}

.has-small-font-size {
  font-size: 1rem;
}

.has-medium-font-size {
  font-size: 1.125rem;
}

.has-large-font-size {
  font-size: 1.25rem;
  line-height: 1.5;
}

.has-extra-large-font-size {
  font-size: 1.375rem;
  line-height: 1.3;
}

.has-huge-font-size {
  font-size: 1.625rem;
  line-height: 1.3;
}

.has-gigantic-font-size {
  font-size: 2rem;
  line-height: 1.3;
}

.entry-content .wp-block-buttons {
  margin-bottom: 1.5rem;
}

/* Blockquotes */
.wp-block-quote,
.wp-block-pullquote {
  border: none !important;
}

.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright {
  max-width: 420px;
  max-width: 40%;
  padding: 1rem 0;
  margin-top: 0;
  margin-bottom: 0;
  text-align: left;
}
.wp-block-pullquote.alignright {
  text-align: right;
}

.wp-block-pullquote.alignleft blockquote::before {
  left: -3rem;
}
.wp-block-pullquote.alignright blockquote::before {
  content: "\201D";
  left: auto;
  right: 0;
  opacity: 0.12;
}

.wp-block-quote {
  margin: 2rem;
}

/* Inline block pagination */
.wp-block-query-pagination-numbers {
  display: flex;
}

/* Block widgets */
.wp-block-latest-comments {
  padding-left: 0;
}

/* Media Queries
 ==================================================== */

/* Extra small devices (portrait phones, less than 576px) */
/* No media query since this is the default in Bootstrap */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .bottom-sidebar-grid-2,
  .bottom-sidebar-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Specific case for three widgets between 576px and 768px */
  .bottom-sidebar-grid-3 {
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
  }

  .bottom-sidebar-grid-3 .bottom-sidebar-widget:nth-child(3) {
    grid-column: 1 / -1; /* Third widget spans full width */
  }

  /* Gallery 2 columns for small devices (tablets, 576px and up) */
  .gallery-columns-2.gallery,
  .gallery-columns-3.gallery,
  .gallery-columns-4.gallery,
  .gallery-columns-5.gallery,
  .gallery-columns-6.gallery,
  .gallery-columns-7.gallery,
  .gallery-columns-8.gallery,
  .gallery-columns-9.gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .header-content {
    width: 80%;
  }

  .container {
    flex-direction: row;
    gap: 3rem;
    margin-top: 4.375rem;
  }

  .main-content {
    flex: 1;
  }

  .blog-left-sidebar .main-content,
  .post-left-sidebar .main-content,
  .template-left .main-content {
    order: 2;
  }

  .sidebar {
    flex-basis: 360px;
    flex-basis: 22.5rem;
    /* Adjust width of the sidebar */
  }

  .d-md-block {
    display: flex;
  }

  .main-navigation {
    display: block;
  }

  /* Hide the offcanvas toggler button in desktop view */
  .navbar-toggler {
    display: none;
  }

  .bottom-sidebar-grid-3 {
    grid-template-columns: repeat(3, 1fr); /* 3 columns */
  }

  .bottom-sidebar-grid-3 .bottom-sidebar-widget:nth-child(3) {
    grid-column: auto; /* Reset to default for larger screens */
  }

  /* Gallery 3 columns for medium devices (desktops, 768px and up) */
  .gallery-columns-3.gallery,
  .gallery-columns-4.gallery,
  .gallery-columns-5.gallery,
  .gallery-columns-6.gallery,
  .gallery-columns-7.gallery,
  .gallery-columns-8.gallery,
  .gallery-columns-9.gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  body {
    padding: 1rem 0.75rem;
  }

  body.boxed {
    padding: 3.125rem 0.75rem;
  }

  .header-content {
    width: 70%;
  }

  li.menu-item-search,
  .searchModal-btn {
    display: block;
  }

  h1.entry-title {
    max-width: 80%;
    margin-inline: auto;
    font-size: 2.5rem;
  }

  .page h1.entry-title {
    margin-inline: 0;
  }

  #page-excerpt {
    max-width: 80%;
  }

  /* Post Author Bio */
  .post-author-info {
    flex-direction: row;
    align-items: start;
  }

  .post-author-description {
    text-align: left;
  }

  dl {
    display: grid;
    grid-template-columns: 30% 1fr;
    line-height: 1.2;
  }

  dt {
    padding-right: 1rem;
  }

  /* Post navigation */
  .post-navigation .nav-previous,
  .post-navigation .nav-next,
  .comment-navigation .nav-previous,
  .comment-navigation .nav-next {
    margin-bottom: 0;
  }

  /* Adjust blog title width */
  .blog.blog-left-sidebar .entry-title,
  .archive.blog-left-sidebar .entry-title,
  .blog.blog-right-sidebar .entry-title,
  .archive.blog-right-sidebar .entry-title,
  .blog.blog-full-width .entry-title,
  .archive.blog-full-width .entry-title {
    max-width: 80%;
    margin-inline: auto;
  }

  /* Resize grouped sidebars */
  .bottom-sidebar-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Gallery 4 columns for large devices (large desktops, 992px and up) */
  .gallery-columns-4.gallery,
  .gallery-columns-5.gallery,
  .gallery-columns-6.gallery,
  .gallery-columns-7.gallery,
  .gallery-columns-8.gallery,
  .gallery-columns-9.gallery {
    grid-template-columns: repeat(4, 1fr);
  }
  .template-right .gallery-columns-5 .gallery-caption,
  .template-right .gallery-columns-6 .gallery-caption,
  .template-right .gallery-columns-7 .gallery-caption,
  .template-right .gallery-columns-8 .gallery-caption,
  .template-right .gallery-columns-9 .gallery-caption {
    display: none;
  }

  #footer-sidebar.widget-area {
    max-width: 70%;
  }
}

/*  X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  html {
    font-size: 16px;
  }

  .header-content {
    width: 50%;
  }

  .post-navigation .nav-links {
    flex-direction: row;
  }

  .post-navigation .nav-next,
  .comment-navigation .nav-next {
    text-align: right;
  }

  .post-navigation .nav-previous,
  .post-navigation .nav-next,
  .comment-navigation .nav-previous,
  .comment-navigation .nav-next {
    margin-bottom: auto;
  }

  /* Gallery 5, 6, 7, 8, and 9 columns for extra large devices */
  .gallery-columns-5.gallery {
    grid-template-columns: repeat(5, 1fr);
  }
  .gallery-columns-6.gallery {
    grid-template-columns: repeat(6, 1fr);
  }
  .gallery-columns-7.gallery {
    grid-template-columns: repeat(7, 1fr);
  }
  .gallery-columns-8.gallery {
    grid-template-columns: repeat(8, 1fr);
  }
  .gallery-columns-9.gallery {
    grid-template-columns: repeat(9, 1fr);
  }
}

/*  XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  html {
    font-size: 17px;
  }
}

/* Mega-Large devices (Mega large resolutions, 1920px and up) */
@media (min-width: 1920px) {
  html {
    font-size: 18px;
  }
}

/* Super-Large devices (Super large resolutions, 2560px and up) */
@media (min-width: 2560px) {
  html {
    font-size: 19px;
  }
}