/*
Plugin Name: FeedCanvas
Description: Styling for the FeedCanvas RSS list display.
Version: 1.32
Author: luminobank
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* 共通スタイル */
.rss-display-container {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #333;
  background-color: #fff;
}

/* タイル表示：ラッパー */
.rss-display-container.type-tile .rss-scroll-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 16px; /* 要素間の余白 */
  overflow-x: hidden;
  padding: 10px 0;
  white-space: normal;
}

/* タイル表示：各アイテム */
.rss-display-container.type-tile .rss-item-tile {
  width: 160px;
  margin: 0;
  box-sizing: border-box;
  text-align: center;
  vertical-align: top;
}

/* タイル表示：画像リンク */
.rss-display-container.type-tile .rss-item-tile-img-link {
  display: block;
  width: 160px;
  height: 120px;
  overflow: hidden;
  border-radius: 0;
  margin-bottom: 8px;
  background-color: #f0f0f0;
  position: relative;
}

/* タイル表示：画像 */
.rss-display-container.type-tile .rss-item-tile-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
  vertical-align: middle;
}

/* タイル表示：タイトルリンク */
.rss-display-container.type-tile .rss-item-tile-title-link {
  font-size: 14px;
  color: #333;
  line-height: 1.3em;
  max-height: 3.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 行数制限 */
  -webkit-box-orient: vertical; /* 縦方向に揃える */
  word-break: break-word;
  background: transparent;
  transition: background-color 0.3s;
  padding: 0 4px;
  border-radius: 0;
  text-decoration: none;
}

/* タイル表示：タイトルリンク（ホバー時） */
.rss-display-container.type-tile .rss-item-tile-title-link:hover {
  background-color: #eee;
}

/* リスト表示：全体ラッパー */
.rss-display-container.type-list {
  position: relative;
  width: 100%;
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  font-size: 16px;
}

/* リスト表示：スクロールエリア（List Design 1用） */
.rss-display-container.type-list.list1 .rss-scroll-wrapper {
  max-height: var(--rss-scroll-height) !important;
  overflow-y: auto;
  padding: 20px 12px 12px 12px;
  border: none;
  border-radius: 0;
  position: relative;
  box-sizing: border-box;
}

/* リスト表示：スクロールエリア（List Design 2用） */
.rss-display-container.type-list.list2 .rss-scroll-wrapper {
  max-height: var(--rss-scroll-height) !important;
  overflow-y: auto;
  padding: 20px 12px 12px 12px;
  border: none;
  border-radius: 0;
  position: relative;
  box-sizing: border-box;
}

/* リスト表示：見出し（List Design 1用） */
.rss-display-container.type-list.list1 .rss-list-header {
  position: absolute;
  top: 0;
  left: var(--header-left, 10px);
  background: #fff;
  padding: 0 10px;
  font-weight: bold;
  font-size: var(--header-font-size, 12px);
  line-height: 1.2em;
  color: var(--header-text-color, #333333);
  white-space: nowrap;
  height: 1.2em;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

/* リスト表示：見出し（List Design 2用） */
.rss-display-container.type-list.list2 .rss-list-header {
  position: absolute;
  top: 0;
  left: var(--header-left, 10px);
  background: #fff;
  padding: 0 10px;
  font-weight: bold;
  font-size: var(--header-font-size, 12px);
  line-height: 1.2em;
  color: var(--header-text-color, #333333);
  white-space: nowrap;
  height: 1.2em;
  transform: translateY(-50%);
  z-index: 10;
  pointer-events: none;
}

/* リスト表示：アイテム（List Design 1用） */
.rss-display-container.type-list.list1 .rss-item-list {
  width: 100%;
  margin: 0;
  padding: 4px 4px;
  font-size: var(--list-font-size, 14px); 
  border-bottom: var(--list-border-style, 1px solid #ccc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  background-color: var(--list-bg-color, #ffffff);
  transition: background-color 0.3s;
}

/* リスト表示：アイテム（List Design 2用） */
.rss-display-container.type-list.list2 .rss-item-list {
  width: 100%;
  margin: 0;
  padding: 4px 4px;
  font-size: var(--list-font-size, 14px); 
  border-bottom: var(--list-border-style, 1px solid #ccc);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-sizing: border-box;
  background-color: var(--list-bg-color, #ffffff);
  transition: background-color 0.3s;
}

/* リスト表示：アイテム（ホバー時）（List Design 1用） */
.rss-display-container.type-list.list1 .rss-item-list:hover {
  background-color: var(--list-hover-bg-color, #eef6ff);
}

/* リスト表示：アイテム（ホバー時）（List Design 2用） */
.rss-display-container.type-list.list2 .rss-item-list:hover {
  background-color: var(--list-hover-bg-color, #eef6ff);
}

/* リスト表示：リンク文字色とホバー色（List Design 1用） */
.rss-display-container.type-list.list1 .rss-item-list a {
  color: var(--list-link-color, #333333) !important;
  text-decoration: none;
}
.rss-display-container.type-list.list1 .rss-item-list a:hover {
  color: var(--list-link-hover-color, #000000) !important;
}

/* リスト表示：リンク文字色とホバー色（List Design 2用） */
.rss-display-container.type-list.list2 .rss-item-list a {
  color: var(--list-link-color, #333333) !important;
  text-decoration: none;
}
.rss-display-container.type-list.list2 .rss-item-list a:hover {
  color: var(--list-link-hover-color, #000000) !important;
}

/* 囲みボックス（List Design 1用） */
.rss-display-container.type-list.list1 .rss-list-box {
  border: var(--list-outline-style, 1px solid #333);
  border-radius: var(--list-border-radius, 0);
  margin-top: var(--list-box-margin-top, 0) !important;
  margin-right: var(--list-box-margin-right, 0) !important;
  margin-bottom: var(--list-box-margin-bottom, 0) !important;
  margin-left: var(--list-box-margin-left, 0) !important;
}

/* 囲みボックス（List Design 2用） */
.rss-display-container.type-list.list2 .rss-list-box {
  border: var(--list-outline-style, 1px solid #333);
  border-radius: var(--list-border-radius, 0);
  margin-top: var(--list-box-margin-top, 0) !important;
  margin-right: var(--list-box-margin-right, 0) !important;
  margin-bottom: var(--list-box-margin-bottom, 0) !important;
  margin-left: var(--list-box-margin-left, 0) !important;
}