/* === Grid: equal squares + hover title ============================ */
:root{
  --tile-zoom: 1.05;
  --dim: 30%;
  --spd-desktop: .4s;
  --spd-mobile: 2s;
}

/* 1) Grid layout (apply globally to Query/Post Template blocks) */
.wp-block-post-template,
.wp-block-query .wp-block-post-template{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
}

/* 2) Each post tile */
.wp-block-post{
  margin: 0;
  padding: 0;
  position: relative;
  overflow: hidden;
}

/* 3) Square tiles */
.wp-block-post .wp-block-post-featured-image,
.wp-block-post .wp-block-post-featured-image a{
  display: block;
  aspect-ratio: 1 / 1;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

/* 4) Image fills square */
.wp-block-post .wp-block-post-featured-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--spd-desktop) ease, filter var(--spd-desktop) ease;
  will-change: transform, filter;
}

/* 5) Title overlay (centered) */
.wp-block-post .wp-block-post-title{
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.2em;
  opacity: 0;
  transition: opacity var(--spd-desktop) ease;
  text-align: center;
  pointer-events: none;
  z-index: 2;
  width: 90%;
}

/* Desktop: hover shows title */
@media (min-width: 821px){
  .wp-block-post:hover .wp-block-post-featured-image img{
    transform: scale(var(--tile-zoom));
    filter: brightness(var(--dim));
  }
  .wp-block-post:hover .wp-block-post-title{ opacity: 1; }
}

/* Mobile: reveal when .in-view is added via JS */
@media (max-width: 820px){
  .wp-block-post.in-view .wp-block-post-featured-image img{
    transform: scale(var(--tile-zoom));
    filter: brightness(var(--dim));
    transition: transform var(--spd-mobile) ease, filter 1.5s ease;
  }
  .wp-block-post.in-view .wp-block-post-title{
    opacity: 1;
    transition: opacity var(--spd-mobile) ease;
  }
}

/* Responsive columns */
@media (max-width: 1024px){
  .wp-block-post-template,
  .wp-block-query .wp-block-post-template{
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px){
  .wp-block-post-template,
  .wp-block-query .wp-block-post-template{
    grid-template-columns: 1fr;
  }
}

/* === Remove gap between header and grid =========================== */
.site-header,
#masthead{ margin-bottom: 0; padding-bottom: 0; }

/* Zero top-gap on common wrappers (global) */
.site-content,
.content-area,
.site-main,
.container,
main,
.entry-content,
.wp-site-blocks,
.wp-block-group{
  margin-top: 0;
  padding-top: 0;
}

/* === Mobile header and scroll normalization ======================= */
@media (max-width: 820px){
  body{ overflow-x: hidden; }

  .wp-site-blocks,
  .site-content,
  main,
  .entry-content{
    margin: 0;
    padding: 0;
  }

  /* Header spans width without causing overflow */
  .site-header, #masthead{
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    position: relative; /* avoids sticky full-height oddities */
  }

  /* Remove inner header gutters */
  #masthead .container,
  .site-header .container,
  #masthead .wrap,
  .site-header .wrap,
  #masthead .header-inner,
  .site-header .header-inner,
  .site-header .wp-block-group{
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: 100%;
    width: 100%;
  }

  /* Keep logo/menu flush */
  .site-header .site-branding,
  .site-header .wp-block-site-logo,
  .site-header .wp-block-navigation,
  .site-header .menu-toggle{
    margin-left: 0;
    margin-right: 0;
  }
}

/* ===== Mobile slide-down menu (<=820px) ===== */
@media (max-width: 820px){
  #primary-menu{
    position:absolute !important;
    top:100% !important; left:0 !important; right:0 !important;
    background:#fff !important; border-top:1px solid #eee !important;
    display:flex !important;
    flex-direction:column !important;
    gap:12px !important; padding:0 16px !important;

    max-height:0;
    overflow:hidden;
    opacity:0;
    transform:translateY(-8px);
    visibility:hidden;
    pointer-events:none;

    transition:
      max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 0.35s ease-out,
      transform 0.45s cubic-bezier(0.25, 1, 1),
      visibility 0s linear 0.45s;

    z-index:1500 !important;
  }

  html.mobile-menu-open #primary-menu{
    padding:12px 16px !important;
    max-height:70vh;
    opacity:1;
    transform:translateY(0);
    visibility:visible;
    pointer-events:auto;
    transition:
      max-height 0.45s cubic-bezier(0.25, 1, 0.5, 1),
      opacity 0.35s ease-out,
      transform 0.45s cubic-bezier(0.25, 1, 1),
      visibility 0s;
  }

  html.mobile-menu-open #primary-menu{
    box-shadow:0 10px 24px rgba(0,0,0,.08);
  }
}

/* ===== Footer (unified, global) ===== */
.site-footer {
  padding: 48px 16px 64px;
  border-top: 1px solid #eee;
  background: #fff;
  text-align: center;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* (Generic footer block styles kept for safety) */
.footer-brand-social {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.footer-logo {
  width: 64px;
  height: auto;
  display: block;
  opacity: 0.95;
  margin: 0 auto;
}
.footer-social {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}
.footer-social .social-icon {
  width: 24px;
  height: 24px;
  display: inline-block;
  opacity: .85;
  transition: opacity .2s ease, transform .2s ease;
}
.footer-social .social-icon:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.site-info {
  font-size: 14px;
  color: #333;
  opacity: 0.8;
}

/* ===== Dima footer hard overrides (ROW LAYOUT) ===== */
.dimas-footer { 
  padding: 48px 16px 64px; 
  border-top: 1px solid #eee; 
  background:#fff; 
  text-align:center; 
}
.dimas-footer .footer-inner { max-width:1200px; margin:0 auto; }

/* Row: logo + icons side by side */
.dimas-footer .footer-brand-social{
  display:flex;
  flex-direction:row;           /* row instead of column */
  align-items:center;           /* vertical centering */
  justify-content:center;       /* center whole group */
  gap:32px;                     /* space between logo and icons */
  margin-bottom:32px;
}

/* Prevent theme “full-width images” in footer */
.dimas-footer img { width:auto !important; max-width:none !important; height:auto; }

/* Logo */
.dimas-footer .footer-logo{
  width:72px !important; height:auto; display:block; margin:0;
}

/* Social row + alignment fix (merged) */
.dimas-footer .footer-social{
  display:flex;
  flex-direction:row;
  align-items:center;           /* vertical centering */
  justify-content:center;
  gap:20px;
  margin:0;                     /* no extra offset */
}
.dimas-footer .footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.dimas-footer .footer-social img.social-icon{
  width:24px !important;
  height:24px !important;
  display:block;                /* removes baseline issues */
  margin:0;
  opacity:.85;
  transition:opacity .2s ease, transform .2s ease;
}
.dimas-footer .footer-social img.social-icon:hover{
  opacity:1; transform:translateY(-2px);
}

/* LinkedIn-only vertical nudge (works for IMG or SVG) */
.dimas-footer .footer-social a[href*="linkedin"] img.social-icon,
.dimas-footer .footer-social a[href*="linkedin"] svg {
  transform: translateY(-2px) !important;      /* base position */
  display: block;
}

/* Preserve the nudge on hover (override generic hover lift) */
.dimas-footer .footer-social a[href*="linkedin"]:hover img.social-icon,
.dimas-footer .footer-social a[href*="linkedin"]:hover svg {
  transform: translateY(-5px) !important;      /* hover lift */
}

/* Copyright */
.dimas-footer .site-info{ font-size:14px; color:#333; opacity:.8; }

/* Slightly tighten spacing on small screens */
@media (max-width:640px){
  .dimas-footer .footer-brand-social{ gap:20px; }
  .dimas-footer .footer-logo{ width:64px !important; }
}

.hero-logo img {
  width: clamp(180px, 30vw, 380px);
  height: auto;
}

/* === Typography Overrides ================== */

/* Body text */
body, p, li {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #222;
}

/* Headings */
h1 {
  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
  font-weight: 700;   /* strongest */
  line-height: 1.1;
}
h2 {
  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
  font-weight: 600;   /* bold but lighter than h1 */
  line-height: 1.2;
}
h3 {
  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
  font-weight: 500;   /* medium, subtler */
  line-height: 1.3;
}
h4, h5, h6 {
  font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
  font-weight: 400;   /* lighter, good for small headings */
  line-height: 1.4;
}

/* Buttons */
button, .wp-block-button__link {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 600;
}


/* 🔹 Service icons */
.service-icon {
  width: 90px;   /* desktop/tablet size */
  height: auto;
  display: inline-block;
  vertical-align: middle;
}

@media (max-width: 600px) {
  .service-icon {
    width: 70px !important; /* bigger on small screens */
  }
}