/**
 * Theme Name: CrossTalk
 * Template:   twentytwentyfour
 * Author:     CrossTalk
 * Author URI: https://crosstalk.me
 * Description: CrossTalk theme for WordPress
 */
html {
  scroll-behavior: smooth;
}

/* スマートフォン（縦向き） */
@media (max-width: 480px) {
  /* 480px以下の画面幅に適用するスタイル */
}

/* スマートフォン（横向き）とタブレット（縦向き） */
@media (min-width: 481px) and (max-width: 767px) {
  /* 481px以上、767px以下の画面幅に適用するスタイル */
}

/* タブレット（横向き）とPC（小型） */
@media (min-width: 768px) and (max-width: 1023px) {
  /* 768px以上、1023px以下の画面幅に適用するスタイル */
  .map-container {
    height: auto;
    padding-bottom: 75%; /* 4:3 aspect ratio for mobile */
  }
}

/* PC（中型） */
@media (min-width: 1024px) and (max-width: 1199px) {
  /* 1024px以上、1199px以下の画面幅に適用するスタイル */
}

/* PC（大型） */
@media (min-width: 1200px) {
  /* 1200px以上の画面幅に適用するスタイル */
}

/* Featured image background styles */
.wp-block-cover {
  position: relative;
}

.wp-block-cover .cover-featured-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Google maps responsive container */
.map-container {
  position: relative;
  width: 100%;
  height: 400px; /* Set a fixed height for desktop screens */
  overflow: hidden;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}