/*
Theme Name: PetSumu Magazine
Theme URI: https://pet-sumu.jp/
Description: ペット可物件専門マガジンテーマ
Author: SAGARAシステムデザイン
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: petsumu-magazine
Tags: magazine, real-estate, pet
*/

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

:root {
  --teal: #87C2BE;
  --teal-dark: #5fa8a3;
  --teal-light: #b8dbd9;
  --dark: #1a1a2e;
  --mid: #4a4a68;
  --light: #f5f7fa;
  --white: #ffffff;
  --border: #e8eaf0;
  --radius: 10px;
  --shadow: 0 2px 12px rgba(0,0,0,.08);
  --font: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.7;
  color: var(--dark);
  background: var(--light);
  margin: 0;
  padding: 0;
}

a { color: var(--teal-dark); text-decoration: none; }
a:hover { color: var(--teal); }
img { max-width: 100%; height: auto; display: block; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.4; margin: 0 0 .75em; }
p { margin: 0 0 1em; }
ul { margin: 0; padding: 0; list-style: none; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

/* ============================================================
   SITE HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--white);
  border-bottom: 3px solid var(--teal);
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}

.admin-bar .site-header { top: 32px; }

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-logo { display: flex; flex-direction: column; text-decoration: none; flex-shrink: 0; }
.site-logo img { height: 48px; width: auto; }
.logo-text { font-size: 22px; font-weight: 900; color: var(--teal); letter-spacing: 2px; line-height: 1; }
.logo-sub { font-size: 10px; color: var(--mid); letter-spacing: 1px; margin-top: 2px; }

.header-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin-left: auto; }
.header-nav a { font-size: 13px; color: var(--dark); font-weight: 500; padding: 4px 6px; border-radius: 4px; transition: color .2s, background .2s; }
.header-nav a:hover { color: var(--teal); background: var(--teal-light); }
.header-nav ul, .header-nav li { display: contents; }

.btn-line-header { background: #06C755 !important; color: #fff !important; padding: 6px 14px !important; border-radius: 20px !important; font-weight: 700 !important; font-size: 12px !important; }
.btn-line-header:hover { background: #05a848 !important; }

.menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: var(--dark); margin: 5px 0; border-radius: 2px; }

/* ============================================================
   LAYOUT FIX — Plugin outputs #top_fbox + aside.sidebar as body siblings
   CSS Grid places them side-by-side
   ============================================================ */
body.petsumu-magazine {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas:
    "header  header"
    "content sidebar"
    "cta     cta"
    "footer  footer"
    "mobile  mobile";
  max-width: 1280px;
  margin: 0 auto;
}

.site-header { grid-area: header; width: 100%; }

#top_fbox.site-content,
body.petsumu-magazine > .site-content { grid-area: content; min-width: 0; background: var(--white); padding: 28px; }

body.petsumu-magazine > aside.sidebar,
body.petsumu-magazine > .sidebar { grid-area: sidebar; min-width: 0; background: var(--white); padding: 24px 16px; border-left: 1px solid var(--border); }

.footer-cta-section { grid-area: cta; }
.site-footer { grid-area: footer; }
.mobile-sticky-cta { grid-area: mobile; }

#wpadminbar { grid-column: 1 / -1; }

/* ============================================================
   SIDEBAR WIDGETS
   ============================================================ */
.cta-box { border-radius: var(--radius); padding: 20px; margin-bottom: 20px; text-align: center; }
.cta-line-box { background: linear-gradient(135deg, #06C755, #04a844); color: #fff; }
.cta-line-box h3, .cta-member-box h3 { color: #fff; font-size: 16px; margin-bottom: 8px; }
.cta-line-box p, .cta-member-box p { color: rgba(255,255,255,.9); font-size: 13px; margin-bottom: 12px; }
.cta-member-box { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff; }
.cta-box .benefits { text-align: left; margin-bottom: 14px; }
.cta-box .benefits li { font-size: 13px; color: rgba(255,255,255,.95); padding: 3px 0; }
.cta-box .benefits li::before { content: "✓ "; }
.cta-box .btn-cta { display: inline-block; background: rgba(255,255,255,.2); border: 2px solid #fff; color: #fff; padding: 8px 20px; border-radius: 24px; font-weight: 700; font-size: 14px; }
.cta-box .btn-cta:hover { background: #fff; color: var(--teal-dark); }
.qr-placeholder { width: 100px; height: 100px; background: rgba(255,255,255,.2); border: 2px dashed rgba(255,255,255,.5); border-radius: 8px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 12px; color: rgba(255,255,255,.7); text-align: center; }

.sidebar-widget { margin-bottom: 24px; }
.sidebar-widget h3 { font-size: 14px; color: var(--dark); border-bottom: 2px solid var(--teal); padding-bottom: 8px; margin-bottom: 12px; }
.sidebar-widget .search-form-wrap { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.sidebar-widget .search-form-wrap input { flex: 1; padding: 8px 12px; border: none; font-size: 13px; outline: none; }
.sidebar-widget .search-form-wrap button { background: var(--teal); color: #fff; border: none; padding: 8px 14px; cursor: pointer; font-size: 13px; }
.rank-item { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); color: var(--dark); font-size: 13px; }
.rank-item:hover { color: var(--teal); }
.rank-num { background: var(--teal); color: #fff; font-size: 11px; font-weight: 700; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-list a { background: var(--light); border: 1px solid var(--border); color: var(--mid); font-size: 12px; padding: 3px 10px; border-radius: 20px; }
.tag-list a:hover { background: var(--teal); border-color: var(--teal); color: #fff; }

/* ============================================================
   PLUGIN CONTENT AREA
   ============================================================ */
#content h2, #content h3 { border-left: 4px solid var(--teal); padding-left: 12px; color: var(--dark); margin: 24px 0 16px; }
#content a { color: var(--mid); }
#content a:hover { color: var(--teal); }
#content img { border-radius: 6px; }
#content ul li { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
#content ul li:hover { box-shadow: var(--shadow); }

/* ============================================================
   FOOTER CTA
   ============================================================ */
.footer-cta-section { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff; text-align: center; padding: 60px 20px; }
.footer-cta-section h2 { font-size: clamp(20px,3vw,28px); color: #fff; margin-bottom: 12px; }
.footer-cta-section p { color: rgba(255,255,255,.9); margin-bottom: 28px; }
.footer-cta-section .cta-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--dark); color: rgba(255,255,255,.7); padding: 32px 20px; text-align: center; }
.site-footer .footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; }
.site-footer .footer-nav a { color: rgba(255,255,255,.7); font-size: 13px; }
.site-footer .footer-nav a:hover { color: var(--teal); }
.site-footer p { font-size: 12px; margin: 0; color: rgba(255,255,255,.5); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary { display: inline-block; background: var(--teal); color: #fff; padding: 10px 24px; border-radius: 24px; font-weight: 700; font-size: 14px; border: none; cursor: pointer; transition: background .2s; text-decoration: none; }
.btn-primary:hover { background: var(--teal-dark); color: #fff; }
.btn-primary-lg { padding: 14px 32px; font-size: 16px; }
.btn-line { display: inline-block; background: #06C755; color: #fff; padding: 10px 24px; border-radius: 24px; font-weight: 700; font-size: 14px; }
.btn-line:hover { background: #05a848; color: #fff; }

/* ============================================================
   MOBILE STICKY CTA
   ============================================================ */
.mobile-sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; display: none; grid-template-columns: 1fr 1fr; box-shadow: 0 -2px 12px rgba(0,0,0,.15); }
.mobile-sticky-cta .m-line { background: #06C755; color: #fff; text-align: center; padding: 14px 8px; font-weight: 700; font-size: 14px; }
.mobile-sticky-cta .m-member { background: var(--teal); color: #fff; text-align: center; padding: 14px 8px; font-weight: 700; font-size: 14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  body.petsumu-magazine {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "content" "sidebar" "cta" "footer" "mobile";
  }
  body.petsumu-magazine > aside.sidebar, body.petsumu-magazine > .sidebar { border-left: none; border-top: 1px solid var(--border); }
  .mobile-sticky-cta { display: grid; }
  .header-nav { display: none; }
  .menu-toggle { display: block; }
}

@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

/* ============================================================
   LAYOUT FIX - Plugin outputs #top_fbox.site-content and
   aside.sidebar as direct body siblings. Use CSS Grid to
   place them side-by-side.
   ============================================================ */
body.petsumu-magazine {
  display: grid;
  grid-template-columns: 1fr 320px;
  grid-template-areas:
    "header  header"
    "content sidebar"
    "cta     cta"
    "footer  footer"
    "mobile  mobile";
  max-width: 1280px;
  margin: 0 auto;
}

.site-header { grid-area: header; width: 100%; }

#top_fbox.site-content,
body.petsumu-magazine > .site-content {
  grid-area: content;
  min-width: 0;
  background: #fff;
  padding: 28px;
}

body.petsumu-magazine > aside.sidebar,
body.petsumu-magazine > .sidebar {
  grid-area: sidebar;
  min-width: 0;
  background: #fff;
  padding: 24px 16px;
  border-left: 1px solid #e8eaf0;
}

.footer-cta-section { grid-area: cta; }
.site-footer { grid-area: footer; }
.mobile-sticky-cta { grid-area: mobile; }

#wpadminbar { grid-column: 1 / -1; }

@media (max-width: 900px) {
  body.petsumu-magazine {
    grid-template-columns: 1fr;
    grid-template-areas: "header" "content" "sidebar" "cta" "footer" "mobile";
  }
  body.petsumu-magazine > aside.sidebar,
  body.petsumu-magazine > .sidebar {
    border-left: none;
    border-top: 1px solid #e8eaf0;
  }
}