/* ????????????????? warmthdesign ??????????????????? warmth.css??*/

/* ???????????????????????????????????????????????? */
body.home .container-default-page{display:none !important;}

/* ?????????????????????oledad ??????????????????CSS ?????--pcctain ??????????1170px??*/
:root,body{--pcctain:1600px !important;}
.container{max-width:calc(100% - 60px);}

/* ???? */
body,button,input,select,textarea,p,li,.post-entry,.penci-wrapper,.home-featured-boxes,#main-nav{font-family:'Noto Sans TC','Raleway',sans-serif !important;}
h1,h2,h3,h4,h5,h6,.entry-title,.home-featured-boxes h4,.penci-mag-featured-content .entry-title,.penci-mag-featured-content h2,.header-slogan-text{font-family:'Oswald','Noto Sans TC',sans-serif !important;}

/* ===== ?????????????????????????????????????????????===== */
body{background-color:#FBF8F3 !important;--pcaccent-cl:#C67B5C !important;}
.penci-header-standard,header#masthead,.penci-header-wrap{background-color:#FBF8F3 !important;}
#footer-section{background-color:#39332D !important;}
a{color:#4A423B;}
a:hover,.menu li a:hover,#main-nav .menu > li > a:hover{color:#C67B5C !important;}

/* ?????????????????????????????? 70% ????????*/
.home-featured-boxes .penci-featured-ct .penci-fea-in h4 span span{background-color:rgba(255,255,255,0.7) !important;color:#222222 !important;}
.home-featured-boxes .penci-featured-ct:hover .penci-fea-in h4 span span{background-color:rgba(255,255,255,0.85) !important;color:#C67B5C !important;}

/* ===== ?????????????????????????????????????????????????????????????????????????===== */
body.category-portfolio .penci-layout-grid .item{text-align:left !important;}
body.category-portfolio .penci-layout-grid .item .grid-header-box{text-align:left !important;}
body.category-portfolio .penci-layout-grid .item .cat,
body.category-portfolio .penci-layout-grid .item .penci-hide-tagupdated,
body.category-portfolio .penci-layout-grid .item .grid-post-box-meta{display:none !important;}
body.category-portfolio .penci-layout-grid .item .grid-header-box:after,
body.category-portfolio .penci-layout-grid .item .grid-header-box::after{content:none !important;display:none !important;}
body.category-portfolio .penci-layout-grid .item .penci-post-box-meta.penci-post-box-grid:before,
body.category-portfolio .penci-layout-grid .item .penci-post-box-meta.penci-post-box-grid::before{content:none !important;display:none !important;}
body.category-portfolio .penci-layout-grid .item .penci-post-box-meta{border-top:none !important;border-bottom:none !important;}
body.category-portfolio .penci-layout-grid .item .thumbnail a.penci-image-holder{
  display:block !important;height:0 !important;min-height:0 !important;padding-top:0 !important;
  padding-bottom:75% !important;background-size:cover !important;background-position:center center !important;}
body.category-portfolio .penci-layout-grid .item .thumbnail{margin-bottom:20px !important;}
body.category-portfolio .penci-layout-grid .penci-readmore-btn{text-align:left !important;margin-top:17px !important;}
body.category-portfolio .penci-layout-grid .item .penci-post-box-meta.penci-post-box-grid{text-align:left !important;}

/* Read more ???????????????????????????*/
body.category-portfolio a.penci-btn-readmore{background-color:#39332D !important;color:#FFFFFF !important;border:none !important;padding:13px 26px !important;display:inline-block !important;letter-spacing:.5px;}
body.category-portfolio a.penci-btn-readmore:hover{background-color:#C67B5C !important;color:#FFFFFF !important;}

/* ===== ?????????????????????+ LINE ??? ===== */
.wd-about{text-align:center;padding:4px 0 2px;}
.wd-about-photo{width:96px;height:96px;border-radius:50%;background:#E7D8C7;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;color:#B08E74;font-size:12px;letter-spacing:1px;}
.wd-about-name{font-family:'Oswald','Noto Sans TC',sans-serif;font-size:18px;color:#39332D;margin:0 0 2px;}
.wd-about-role{font-size:12px;color:#9A8E85;margin:0 0 12px;letter-spacing:.5px;}
.wd-about-bio{font-size:13px;line-height:1.9;color:#5C534C;text-align:left;margin:0 0 16px;}
.wd-about-line{display:inline-block;background:#06C755;color:#ffffff !important;padding:11px 28px;border-radius:24px;font-size:14px;text-decoration:none;}
.wd-about-line:hover{background:#05b34c;color:#ffffff !important;}

/* ????????????€????????????????????????????????????? 14x14px??????????????????????*/
.inner-header-social{display:inline-flex !important;align-items:center;gap:14px;}
.inner-header-social a{display:inline-flex !important;align-items:center;justify-content:center;line-height:1;}
.inner-header-social a i{font-size:14px !important;width:14px !important;height:14px !important;line-height:14px !important;vertical-align:middle !important;display:inline-flex;align-items:center;justify-content:center;}

/* ????????????€?????????flex ???????????????????????????? */
[itemtype*="SiteNavigationElement"] > .container{display:flex !important;align-items:center !important;}
[itemtype*="SiteNavigationElement"] > .container > ul.menu{display:flex !important;align-items:center !important;float:none !important;margin:0 auto 0 0 !important;order:1;}
[itemtype*="SiteNavigationElement"] > .container > ul.menu > li{float:none !important;}
[itemtype*="SiteNavigationElement"] > .container > .main-nav-social{float:none !important;order:2;display:flex !important;align-items:center !important;margin:0 10px 0 0 !important;}
[itemtype*="SiteNavigationElement"] > .container > #top-search{float:none !important;order:3;display:flex !important;align-items:center !important;}

/* ????????? */
#footer-section{padding-top:0 !important;padding-bottom:64px !important;}
.footer-socials-section{padding:14px 0 8px !important;}
ul.footer-socials li{margin-bottom:6px !important;}
.footer-logo-copyright{padding-top:10px !important;padding-bottom:14px !important;}
#footer-section .go-to-top-parent{bottom:14px !important;}
ul.footer-socials{display:inline-flex;align-items:center;flex-wrap:wrap;justify-content:center;}
ul.footer-socials li a{display:inline-flex !important;align-items:center !important;vertical-align:middle !important;line-height:normal !important;}
ul.footer-socials li a i{display:inline-flex !important;align-items:center !important;justify-content:center !important;line-height:1 !important;}


/* ===== Portfolio Gallery Grid (4 columns responsive) ===== */
.portfolio-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 15px !important;
  margin-bottom: 25px !important;
}
@media (max-width: 768px) {
  .portfolio-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}
@media (max-width: 480px) {
  .portfolio-gallery-grid {
    grid-template-columns: 1fr !important;
  }
}
.portfolio-gallery-grid img {
  transition: transform 0.3s ease, filter 0.3s ease;
}
.portfolio-gallery-grid img:hover {
  transform: scale(1.02);
  filter: brightness(0.95);
}

/* ===== Justified Gallery Grid (aspect-ratio based row alignment) ===== */
.portfolio-gallery-justified {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 30px !important;
  margin-bottom: 30px !important;
}
.portfolio-gallery-justified a {
  height: 380px !important;
  flex-grow: var(--ar) !important;
  flex-basis: calc(380px * var(--ar)) !important;
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
}
.portfolio-gallery-justified img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.3s ease, filter 0.3s ease !important;
}
.portfolio-gallery-justified img:hover {
  transform: scale(1.02) !important;
  filter: brightness(0.95) !important;
}
@media (max-width: 960px) {
  .portfolio-gallery-justified a {
    height: 280px !important;
    flex-basis: calc(280px * var(--ar)) !important;
  }
}
@media (max-width: 600px) {
  .portfolio-gallery-justified a {
    height: 180px !important;
    flex-basis: calc(180px * var(--ar)) !important;
  }
}

/* ===== Hide Sidebar on Single Portfolio Posts ===== */
.single-category-portfolio #sidebar {
  display: none !important;
}
.single-category-portfolio #main {
  width: 100% !important;
  float: none !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}
/* If Soledad wrapper container has custom flex rules */
.single-category-portfolio .container-single {
  display: block !important;
}

/* Make single post header author link color inherit from metadata text color */
.post-box-meta-single a.author-url,
.post-box-meta-single a,
.penci-hide-tagupdated a {
  color: inherit !important;
  text-decoration: none !important;
}
.post-box-meta-single a.author-url:hover,
.post-box-meta-single a:hover,
.penci-hide-tagupdated a:hover {
  color: #C67B5C !important; /* Allow hover color */
}

/* Force font-size to 24px for post project metadata and intro paragraphs to override theme selectors */
.project-meta-info, 
.project-meta-info p,
.project-meta-info span,
.project-meta-info strong {
  font-size: 17px !important;
  line-height: 1.8 !important;
}
.project-intro, 
.project-intro p,
.project-intro span {
  font-size: 17px !important;
  line-height: 2.0 !important;
}



/* Constrain project text content width to 1170px to match the featured image exactly */
.project-meta-info,
.project-intro {
  max-width: 1170px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ==========================================================================
   Alignment Fixes for Header, Homepage Grid, and Footer
   ========================================================================== */

/* 1. Header Social and Search Icons Vertical Alignment */
#top-search,
.main-nav-social {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  height: 40px !important;
}
#top-search a,
.inner-header-social a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
  vertical-align: middle !important;
}
#top-search a i,
.inner-header-social a i {
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.inner-header-social a i.penciicon-threads {
  transform: translateY(-1px) !important; /* Nudge Threads icon in header */
}
.inner-header-social a i.penciicon-line {
  transform: translateY(-1.5px) !important; /* Nudge LINE icon in header */
}

/* 2. Homepage Grid (Featured Style 37) Right Column Alignment to Bottom of Left Column */
@media only screen and (min-width: 901px) {
  /* Target the actual swiper slide divs (class .item) instead of li tags */
  .featured-style-37 .penci-featured-items-right > .item:first-child,
  .featured-style-37 .penci-featured-items-right > .swiper-slide:first-child {
    margin-bottom: 15px !important; /* Refined to 4.75% of column width to align and eliminate white slit */
  }
}

/* 3. Footer Social Icons Vertical Alignment (Fixing Threads and LINE Icons) */
.footer-socials li a i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.footer-socials li a i.penciicon-threads {
  transform: translateY(-1px) !important; /* Nudge Threads icon in footer (changed from -2px to -1px) */
}
.footer-socials li a i.penciicon-line {
  transform: translateY(-0.5px) !important; /* Nudge LINE icon in footer */
}



/* 5. Fix Homepage Featured Style 37 Slider Height and Pagination Dots Alignment */
@media only screen and (min-width: 960px) {
  .featured-style-37 .penci-owl-featured-area,
  .featured-style-37 .penci-owl-featured-area .swiper-wrapper,
  .featured-style-37 .penci-owl-featured-area .swiper-slide {
    height: auto !important;
  }
}

/* === WARMTH HEADER LOGO (v4 final) === */
/* Header logo sizing. Matches the approved mockup
   (website-logo-final-lowered-mockup.png): the logo image box is 428px wide,
   its top edge sits 23px below the top navigation bar, and the brand slogan
   sits 2px under the image box, so overall header height stays the same. */
/* !important on the image box guards against Soledad's own generated
   logo-height rule, which would otherwise stretch a 1400px-wide logo. */
#header .inner-header .container{ padding-top:23px; }
#logo a{ display:inline-block; max-width:428px !important; width:100%; }
#logo img{ max-width:100% !important; width:auto; height:auto !important; }
.header-slogan{ margin-top:2px; }
@media only screen and (max-width:767px){
  #logo a{ max-width:300px !important; }
  .header-slogan{ margin-top:6px; }
}
/* === END WARMTH HEADER LOGO === */