@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.4
*/

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* --- "See of Sky & Oracle" - Sky Shrine Theme --- */

:root {
  /* Atmosphere */
  --cp-bg-sky-top: #87CEEB;
  /* Sky Blue */
  --cp-bg-sky-bot: #F0F8FF;
  /* AliceBlue (Gentle Sky) */

  /* Surfaces - Glassmorphism */
  --cp-surface: rgba(240, 248, 255, 0.9);
  /* AliceBlue Surface */
  --cp-surface-highlight: #ffffff;

  /* Text */
  --cp-text: #0B1026;
  /* Deep Blue Black */
  --cp-text-dim: #444444;

  /* Accents */
  --cp-primary: #D4AF37;
  /* Gold (Metallic) */
  --cp-vermilion: #f34937;
  /* Vermilion (Torii Red) */
  --cp-deep-blue: #0c1445;
  /* Night Sky Deep Blue */

  /* Gradients */
  --cp-grad-main: linear-gradient(135deg, var(--cp-deep-blue) 0%, #2a3a7c 100%);
  --cp-grad-gold: linear-gradient(135deg, #CFB53B 0%, #D4AF37 50%, #FFDF00 100%);
  --cp-grad-mist: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.8), transparent);
}

body {
  background-color: var(--cp-bg-sky-bot);
  color: var(--cp-text);
  font-family: 'Helvetica Neue', Arial, sans-serif;

  /* Background Layers: Gentle Sky Gradient */
  background-image: linear-gradient(to bottom, var(--cp-bg-sky-top), var(--cp-bg-sky-bot));

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  min-height: 100vh;
}

/* Soften Content Areas to prevent Glare */
.main,
.sidebar,
.entry-card-wrap,
.widget-entry-cards .a-wrap {
  background-color: #FAFDFF !important;
  /* Extremely pale blue-white, softer than pure white */
}

/* Base link colors */
a {
  color: var(--cp-deep-blue);
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

a:hover {
  color: var(--cp-vermilion);
  text-shadow: 0 0 5px rgba(255, 69, 0, 0.4);
}

/* Header */
.header {
  background: rgba(255, 255, 255, 0.8) !important;
  border-bottom: 4px solid var(--cp-primary);
  /* Gold floor */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  position: relative;
}

/* Banner Integration */
.header-in {
  background-image: url('images/banner.png?v=20241230-13') !important;
  background-position: center !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  /* Aspect Ratio for Responsive Banner (Adjust approx 10:1 for slimmer headers) */
  width: 100%;
  height: 0 !important;
  padding-bottom: 12%;
  /* Reduced from 20% to 10% (Half size) */
  min-height: 0;
  /* Remove !important to allow mobile override */
  border-radius: 0 0 12px 12px;
  margin-bottom: 20px;
}

/* Site Title (if visible) */
/* Site Title and Description (Hidden: text is in banner image) */
.site-name-text,
.site-description-text,
.tagline {
  display: none !important;
}

/************************************
** Responsive
************************************/
@media screen and (max-width: 1023px) {
  body {
    background-size: 200px, 150px;
    background-position: right bottom -20px, left bottom -20px;
  }

  .header-in {
    min-height: 120px;
    /* Smaller banner on tablet */
  }
}

@media screen and (max-width: 834px) {
  /* Tablet adjustments if needed */
}

@media screen and (max-width: 480px) {
  body {
    /* Show only one char or simplify on mobile */
    background-image: linear-gradient(to bottom, var(--cp-bg-sky-top), var(--cp-bg-sky-bot));
    /* Remove characters on very small screens to avoid overlap if needed, or keep them */
  }

  .header-in {
    min-height: 80px !important;
    /* Ensure minimum visibility on mobile */
    padding-bottom: 25% !important;
    /* Increase ratio on mobile for visibility */
  }

  /* Fix Card Title Overflow on Mobile */
  .entry-card-title {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 4px;
    /* Removed max-height/clamp to revert to previous simple state */
  }

  .entry-card-snippet {
    font-size: 12px;
    display: none;
    /* Often snippets clutter mobile cards, hiding makes titles fit better */
  }
}