/* ===============================
   CORE / BASE
================================ */

.briefme-wrap{
  max-width:1100px;
  margin:0 auto;
  padding:28px 18px 40px;
  color:#e9eef6;

  /* 👇 τραβάει το main προς τα rails */
  position: relative;
  z-index: 1;
}
.briefme-main-scroll{
  padding: 0 8px; /* μικρό breathing space */
}

html,body{
  height:100%;
}

body{
  margin: 0;
  background: #ffffff;
  color: #111827; /* near-black */
  font-family: "Times New Roman", Times, serif;
}

/* ===============================
   3-COLUMN SHELL (FIXED RAILS)
================================ */

.briefme-shell{
  height:100vh;
  display:grid;
  grid-template-columns: 300px 1fr 300px;

  /* ✅ ΚΑΙΝΟΥΡΓΙΟ: κεντράρουμε ΟΛΟ το layout (rails + main) */
  max-width: 1700px;   /* 300 + 1100 + 300 = 1700 */
  margin: 0 auto;
  column-gap: 16px;    /* το κενό που θέλεις να είναι “κοντά” */
  padding: 0 12px;     /* μικρό safety padding */
}

/* LEFT / RIGHT RAILS (NO SCROLL) */
.briefme-rail{
  padding:18px 8px; /* πιο κοντά στο main */
  overflow:hidden;
  background:#ffffff;
}

/* ADS STACK */
.briefme-ads{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ad-slot{
  width:100%;
  min-height:250px;

  background:#ffffff;          /* ✅ ΛΕΥΚΟ */
  /*border:1px solid #e5e7eb;*/    /* light gray border */
  border-radius:18px;

  padding:12px;
  overflow:hidden;
}

/* MAIN — THE ONLY SCROLL AREA */
.briefme-main-scroll{
  overflow-y:auto;
  scroll-behavior:smooth;
}

/* ===============================
   HEADER / SEARCH
================================ */

.briefme-top{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:18px;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
}

.logo-dot{
  width:22px;
  height:22px;
  border-radius:8px;
  background:linear-gradient(135deg,#4ade80,#60a5fa);
}

.brand-name{
  font-size:24px;
  font-weight:700;
  letter-spacing:.2px;
  color:#111827;
}

.brand-sub{
  opacity:.7;
  font-size:18px;
  margin-top:2px;
  color:#6b7280;
}

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

.brief-search input{
  width:min(200px,55vw);
  padding:10px 14px;
  border-radius:999px;  
  background:#ffffff;
  border:1px solid #e5e7eb;
  color:#111827;
}

.new-brief{
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#e9eef6;
  text-decoration:none;
}

/* ===============================
   ROW / CHIPS
================================ */

.briefme-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin:10px 0 18px;
}

.briefme-h2{
  font-size:20px;
  font-weight:700;
  opacity:.9;
  color:#000000;
}

.briefme-chips{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.chip{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#111827;
  text-decoration:none;
  font-size:18px;
}

.chip.active{
	border-color:rgba(74,222,128,.55);
	background:rgba(74,222,128,.10);
	border-color:#059669;
	background:#ecfdf5;
	color:#065f46;
}

/* ===============================
   FEED CARDS
================================ */

.briefme-feed{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.brief-card{
  border:1px solid #e5e7eb;      /* light gray border */
  background:#f3f4f6;            /* light gray card */
  border-radius:16px;
  padding:16px 16px 14px;
}

.brief-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  opacity:.75;
  font-size:16px;
  margin-bottom:8px;
  color:#6b7280; /* gray-500 */
}

.dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#86efac;
  margin-right:8px;
}

.brief-title{
  margin:0 0 8px;
  font-size:28px;
  font-weight:bold;
  line-height:1.25;
  cursor:default;
  color:#111827;
}

.brief-what{
  opacity:.86;
  font-size:20px;
  line-height:1.5;
  display:-webkit-box;
  /*-webkit-line-clamp:3;*/
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height: calc(1.5em * 3);
  color:#374151; /* gray-700 */
}

.brief-what--media{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.brief-what-text{
  flex: 1 1 auto;
  min-width: 0;
}

.brief-what-thumb{
  flex: 0 0 200px; /* πλάτος thumbnail στο card */
}

.brief-what-thumb img{
  width:100%;
  height:auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius:12px;
  display:block;
}

/* mobile: εικόνα κάτω ή πιο μικρή */
@media (max-width: 680px){
  .brief-what--media{
    flex-direction:column;
  }
  .brief-what-thumb{
    flex: 0 0 auto;
    width: 100%;
    max-width: 320px;
  }
}


.brief-bottom{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-end;
  border-top:1px dashed rgba(255,255,255,.12);
  /*margin-top:12px;*/
  margin-bottom:12px;
  padding-top:10px;
}

.brief-why{
  font-size:20px;
  opacity:.92;
  max-width:70%;
  color:#374151;
}

.brief-why strong{
  color:#059669; /* green-600 */
}

.brief-source{
  white-space:nowrap;
  color:#4991e3;
  text-decoration:none;
  font-size:16px;
	font-weight:bold;
}

.brief-source:hover{
  text-decoration:underline;
}
/*.brief-source {display:none;}*/

.brief-share{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:8px;
  margin-bottom:6px;
}

.share-btn{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#ffffff;
  color:#374151;
  text-decoration:none;
  line-height:1;
}

.share-btn:hover{
  background:#f3f4f6;
}

.share-fb{
  color:#1877f2;
  border-color:#dbeafe;
}

.share-x{
  color:#111827;
  border-color:#e5e7eb;
}

.share-linkedin{
  color:#0a66c2;
  border-color:#bfdbfe;
}

.share-linkedin:hover{
  background:#eff6ff;
}

/* ===============================
   PAGINATION
================================ */

.brief-pagination{
  margin:20px 0;
}

.brief-pagination .page-numbers{
  margin-right:8px;
  color:#e9eef6;
  text-decoration:none;
  opacity:.8;
}

.brief-pagination .current{
  opacity:1;
  font-weight:700;
}

/* ===============================
   RESPONSIVE (NO RAILS)
================================ */
@media (max-width:1200px){
  .briefme-shell{
    height:auto;
    grid-template-columns:1fr;
  }
  .briefme-rail{
    display:none;
  }
  .briefme-main-scroll{
    overflow:visible;
  }
}
.brief-card.brief-target{
  outline: 2px solid #22c55e;
  outline-offset: 2px;
}
.share-copy{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.briefme-global-footer ul {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.briefme-global-footer {
  padding: 20px 0;
}

/* Hide Hello theme footer (we render our own Elementor footer via wp_footer) */
footer#site-footer,
.site-footer,
.elementor-location-footer {
  display: none !important;
}


/* DOT BLINKING */
/* LIVE blinking dot */
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: #ff2d55;            /* live red */
  box-shadow: 0 0 0 0 rgba(255,45,85,.55);
  animation: livePulse 1.1s ease-in-out infinite;
  vertical-align: middle;
}

@keyframes livePulse{
  0%   { opacity: .35; transform: scale(.85); box-shadow: 0 0 0 0 rgba(255,45,85,.55); }
  50%  { opacity: 1;   transform: scale(1);   box-shadow: 0 0 0 10px rgba(255,45,85,0); }
  100% { opacity: .35; transform: scale(.85); box-shadow: 0 0 0 0 rgba(255,45,85,0); }
}

/* accessibility */
@media (prefers-reduced-motion: reduce){
  .dot{ animation: none; opacity: 1; box-shadow: none; }
}

/* ===========================
   TEMP: AdSense review layout
   - Remove fixed rails
   - Remove isolated main scroll
   =========================== 

body.post-type-archive-brief .briefme-shell{
  height: auto !important;
  grid-template-columns: 1fr !important;
  max-width: 1100px !important;   
  margin: 0 auto !important;
  column-gap: 0 !important;
}

body.post-type-archive-brief .briefme-rail{
  display: none !important;
}

body.post-type-archive-brief .briefme-main-scroll{
  overflow: visible !important;   /* body scroll *
}

/* Προαιρετικό: λίγο “ανάσα” όταν φύγουν τα rails *
body.post-type-archive-brief .briefme-wrap{
  padding-top: 28px;
}*/

/* ===========================
   Briefme: 3-column layout
   with BODY scroll (no isolated main scroll)
   Rails sticky (not fixed)
   =========================== */

body.post-type-archive-brief .briefme-shell{
  height: auto !important;                /* body scroll */
  grid-template-columns: 300px 1fr 300px; /* rails + main + rails */
  align-items: start;
}

/* Main: allow body to scroll, not the main container */
body.post-type-archive-brief .briefme-main-scroll{
  overflow: visible !important;
  height: auto !important;
}

/* Rails visible again */
body.post-type-archive-brief .briefme-rail{
  display: block !important;
  position: sticky !important;            /* sticky instead of fixed */
  top: 16px;                              /* tweak if you have a header */
  height: auto !important;
  align-self: start;
}

/* If you had fixed positioning on inner rail container, neutralize it */
body.post-type-archive-brief .briefme-rail *{
  max-height: none;
}

.brief-inline-ad{
  margin: 14px 0;
}

/* Ads area below Load more (2 columns desktop, 1 column mobile) */
.briefme-below-loadmore-ads{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

.briefme-below-ad-col{
  min-width: 0;
}

/* Mobile / tablet */
@media (max-width: 900px){
  .briefme-below-loadmore-ads{
    grid-template-columns: 1fr;
  }
}

.brief-loadmore-btn {
	margin-top:20px;
	padding-left: 10px;
	padding-right: 10px;
	display: block;
	margin: 28px auto;
	padding: 14px 32px;
	min-width: 240px;
	text-align: center;

	background: #111;           /* primary */
	color: #fff;
	border: none;
	border-radius: 8px;

	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.3px;

	cursor: pointer;
	transition: all .2s ease;
}

/* Hover */
.brief-loadmore-btn:hover{
  background: #ff7a00;        /* ίδιο hover vibe με το brand σου */
  color: #fff;
  transform: translateY(-1px);
}

/* Active */
.brief-loadmore-btn:active{
  transform: translateY(0);
}

/* ===========================
   Mobile/Tablet: hide rails
   =========================== */
@media (max-width: 1024px){
  body.post-type-archive-brief .briefme-shell{
    grid-template-columns: 1fr !important;
  }

  body.post-type-archive-brief .briefme-rail{
    display: none !important;
  }

  /* λίγο πιο “ανάσα” στο main */
  body.post-type-archive-brief .briefme-wrap{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ===============================
   ARCHIVE BRIEF CURRENT LAYOUT
   Category -> full-width image -> title -> article text
================================ */

.brief-card .brief-meta--topic-only{
  margin-bottom: 14px;
}

.brief-card .brief-hero-image{
  width: 100%;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 18px;
}

.brief-card .brief-hero-image img,
.brief-card img.brief-hero-img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: cover;
}

.brief-card .brief-title{
  margin-top: 0;
  margin-bottom: 12px;
}

.brief-card .brief-article-content{
  width: 100%;
  color: #111827 !important;
  font-size: 17px;
  line-height: 1.72;
  font-weight: 400;
}

.brief-card .brief-article-content p,
.brief-card .brief-article-content li,
.brief-card .brief-article-content span,
.brief-card .brief-article-content div,
.brief-card .brief-article-content strong,
.brief-card .brief-article-content b,
.brief-card .brief-article-content em,
.brief-card .brief-article-content h1,
.brief-card .brief-article-content h2,
.brief-card .brief-article-content h3,
.brief-card .brief-article-content h4,
.brief-card .brief-article-content h5,
.brief-card .brief-article-content h6{
  color: #111827 !important;
}

.brief-card .brief-article-content a{
  color: #0f4c81 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.brief-card .brief-article-content > :first-child{
  margin-top: 0;
}

.brief-card .brief-article-content > :last-child{
  margin-bottom: 0;
}


/* ===============================
   ARCHIVE COVER IMAGE
================================ */

.briefme-cover{
  width: 100%;
  margin: 0 0 18px;
  overflow: hidden;
  border-radius: 18px;

  background: #ffffff;
}

.briefme-cover img{
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

@media (max-width: 680px){
  .briefme-cover{
    border-radius: 14px;
    margin-bottom: 16px;
  }
}

/* ===============================
   MOBILE / ADS OVERFLOW SAFETY
   Scoped to mobile only, so desktop keeps the original 3-column width.
================================ */

@media (max-width: 680px){
  *,
  *::before,
  *::after{
    box-sizing: border-box;
  }

  html,
  body{
    max-width: 100%;
    overflow-x: hidden;
  }

  img,
  iframe,
  video,
  embed,
  object{
    max-width: 100%;
  }

  body.post-type-archive-brief .briefme-shell{
    width: 100%;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
    column-gap: 0;
  }

  body.post-type-archive-brief .briefme-main-scroll,
  body.post-type-archive-brief .briefme-wrap,
  body.post-type-archive-brief .briefme-feed,
  body.post-type-archive-brief .brief-card{
    max-width: 100%;
  }

  body.post-type-archive-brief .briefme-wrap{
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
  }

  .adsbygoogle,
  ins.adsbygoogle,
  .brief-inline-ad,
  .ad-slot,
  .briefme-below-ad-col{
    max-width: 100% !important;
    overflow: hidden;
  }

  .adsbygoogle iframe,
  ins.adsbygoogle iframe,
  .brief-inline-ad iframe,
  .ad-slot iframe{
    max-width: 100% !important;
  }

  .brief-loadmore-btn{
    min-width: 0;
    width: min(240px, 100%);
  }
}