/*
Theme Name: Social Feed Portfolio
Theme URI: https://example.com/social-feed-portfolio
Author: 3Headed Monster (starter)
Author URI: https://3headedmonster.com
Description: A minimalist portfolio theme that presents projects like a social media feed.
Version: 0.1.0
License: GPL-2.0-or-later
Text Domain: social-feed-portfolio
*/

:root{
  --bg:#f7f7f8;
  --card:#ffffff;
  --ink:#0c0c0d;
  --muted:#7a7a7a;
  --border:#e5e7eb;
  --accent:#111827;
  --radius:20px;
  --gap:16px;
  --maxw:1024px;
  --shadow: 0 4px 24px rgba(0,0,0,.05);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji", "Segoe UI Emoji";
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.5;
}

.container{
  max-width:var(--maxw);
  margin: 24px auto;
  padding: 0 16px;
  display:grid;
  grid-template-columns: minmax(0,1fr);
}

@media (min-width: 980px){
  .container{
    gap:24px;
    grid-template-columns: 320px minmax(0,1fr);
  }
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.sfp-profile-top{
    background-color:#fff;
}
.profile{
  position:relative;
  top:16px;
  padding:20px;
  border-bottom:1px solid #e1e1e1;
}

.profile .row{
  display:flex; gap:12px; align-items:center;
}
.profile img.avatar{
  width:64px; height:64px; border-radius:999px; object-fit:cover; border:1px solid var(--border);
}
.profile .name{font-weight:700; font-size:20px}
.profile .handle{color:var(--muted); font-family:var(--mono); font-size:12px}
.profile .bio{margin-top:8px; color:var(--ink)}

.tabs{
  margin-top:12px; display:flex; gap:20px; flex-wrap:wrap; font-size:13px; justify-content: space-evenly;
}
.tab{ text-transform:uppercase; letter-spacing:.06em; color:var(--muted);}
.tab.is-active{color:var(--accent); 
    font-weight:500;
    border-bottom: 3px solid #000;
    text-decoration: none;
}
.tab:hover{
    font-weight: 500;
    text-decoration: none;
    border-bottom: 3px solid #000;
}
.feed{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.post{
  padding:16px;
  margin-top:1.5em;
  border-bottom:1px solid #e1e1e1;
  padding-bottom: 2em;
}

.post:last-of-type{
  border-bottom:none !important;
}

.post .head{
  display:flex; align-items:center; gap:10px; margin-bottom:10px;
}
.brand-avatar{
  width:36px;height:36px;border-radius:9px;object-fit:cover;border:1px solid var(--border);background:#fafafa;
}
.brand-meta{
  display:flex; flex-direction:column; line-height:1.2;
}
.brand-name{font-weight:600}
.post-date{font-size:12px; color:var(--muted)}

.post .excerpt{ margin: 8px 0 10px; color:#222}
.post .media{
  margin-top:8px; overflow:hidden; border-radius:12px; border:1px solid var(--border); background:#000;
}
.post .media img, .post .media video, .post .media iframe { display:block; width:100%; height:auto; }

.footer{
  text-align:center; color:var(--muted); font-size:12px; padding:24px 8px;
}
.sidebar .card{padding:16px; margin-bottom:1em;}
.sidebar .clients{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px}
.sidebar .client{display:flex; gap:10px; align-items:center}
.sidebar .client .logo{width:28px; height:28px; border-radius:7px; border:1px solid var(--border); object-fit:cover; background:#fafafa}
.sidebar .client .name{font-weight:600; font-size:14px}
.sidebar .client .note{color:var(--muted); font-size:12px}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
.screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Inlined in the template or added to style.css */
body.sfp-onecol .container { max-width: 820px; grid-template-columns: 1fr !important; }
body.sfp-onecol aside.sidebar { display: none !important; }
body.sfp-onecol main.feed { grid-column: 1 / -1; }

/* Sidebar Clients & Teams */
.sidebar-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 12px;
}

.sidebar .clients {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar .client {
  display: flex;
  gap: 10px;
  align-items: center;
}

.sidebar .client .logo {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border);
  vertical-align: middle;
}

.sidebar .client .name {
  font-weight: 600;
  font-size: 14px;
}

.sidebar .client .note {
  color: var(--muted);
  font-size: 12px;
}

/* Hide Clients & Teams sidebar section on mobile */
@media (max-width: 979px){
  /* This targets the Clients & Teams block only (not the profile card) */
  aside.sidebar > section.sidebar.card { 
    display: none !important; 
  }

  /* If your Portfolio Feed page doesn't render a sidebar profile,
     collapse the now-empty aside on that template to avoid blank space. */
  body.page-template-portfolio-feed aside.sidebar,
  body.page-template-page-templatesportfolio-feed-php aside.sidebar {
    display: none !important;
  }
  .sfp-modal{
      margin-top:2em;
  }
}
/* Header row: brand info on left, Open project on right */
.sfp-feeditem .head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 6px;
}

.sfp-feeditem .head-left{
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* allow brand-meta to truncate neatly */
}

.sfp-feeditem .brand-avatar{
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border);
}

.sfp-feeditem .brand-meta{
  display: flex; flex-direction: column; line-height: 1.2;
}

.sfp-feeditem .brand-name{ font-weight: 600; }
.sfp-feeditem .post-date{ font-size: 12px; color: var(--muted); }

/* Inline "Open project" pill */
.read-more-inline{
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: inherit;
  transition: transform .08s ease, background .15s ease, border-color .15s ease;
}
.read-more-inline:hover{
  background: #f8f8f8;
  border-color: #ddd;
}
.read-more-inline:active{
  transform: translateY(1px);
}

/* Tighten small screens a bit */
@media (max-width: 480px){
  .read-more-inline{ padding: 5px 8px; font-size: 12px; }
  .sfp-feeditem .brand-avatar{ width: 28px; height: 28px; }
}

/* Contact card */
.card.contact .sidebar-title{
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 10px;
}

.contact-blurb{
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
  margin: 0 0 12px;
}

.contact-links{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.contact-links li a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 6px 8px;
  border-radius: 8px;
  transition: background .15s ease, transform .08s ease;
}

.contact-links li a:hover{
  background: #f6f6f6;
}

.contact-links svg{
  width: 20px;
  height: 20px;
  opacity: 0.9;
}

/* If you previously hide Clients & Teams on mobile, leave contact visible */
@media (max-width: 979px){
  /* Optional: keep contact visible on mobile */
  /* .card.contact { display:block; } */
}

/* Desktop: make the whole sidebar sticky */
@media (min-width: 980px){
  .container{
    /* ensure grid items align to the top so sticky can latch */
    align-items: start;
  }

  aside.sidebar{
    position: -webkit-sticky; /* Safari */
    position: sticky;
    top: 16px;                /* distance from top */
    align-self: start;        /* don't stretch full column height */
    max-height: calc(100vh - 24px); /* keep within the viewport with some breathing room */
    overflow: auto;           /* scroll inside if it's taller than the viewport */
    overscroll-behavior: contain;
    scrollbar-gutter: stable; /* avoids layout shift when scrollbar appears */
  }

  /* prevent nested cards from adding their own scrollbars */
  aside.sidebar .card{
    overflow: visible;
  }

  /* if you're logged in, account for the WP admin bar height */
  body.admin-bar aside.sidebar{
    top: calc(16px + 32px);
  }
}
.client a:hover{
    text-decoration:none;
}

/* Pulsating "active" dot */
.active-dot{
  display:inline-block;
  width:8px; height:8px;
  margin-left:6px;
  border-radius:50%;
  background:#22c55e; /* green-500 */
  box-shadow: 0 0 0 0 rgba(34,197,94,.7);
  vertical-align: middle;
  animation: sfpPulse 1.5s ease-out infinite;
}

@keyframes sfpPulse{
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .active-dot{ animation: none; }
}

/* Screen-reader-only helper */
.sr-only{
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

.image-border{
    border:1px solid #e1e1e1;
}

.sfp-feed-loader::after{
  content:"";
  display:inline-block;
  width:16px; height:16px;
  margin-left:8px;
  border-radius:50%;
  border:2px solid #bbb;
  border-top-color: transparent;
  animation: sfpSpin .8s linear infinite;
  vertical-align: -3px;
}
@keyframes sfpSpin{ to { transform: rotate(360deg); } }

.sfp-carousel__slide{
    margin:0 0 0 0 !important;
}
.sfp-feed[data-type="design"] .sfp-feeditem .post-date { display: none; }

/* Full-width banner */
.site-banner {
  width: 100%;
}
.site-banner img {
  display: block;
  width: 100%;
  height: 300px;          /* desired visible height */
  object-fit: cover;      /* crop nicely */
}

/* Optional: smaller height on phones */
@media (max-width: 640px) {
  .site-banner img { height: 220px; }
}