/*
Theme Name: M365AMA
Theme URI: https://m365ama.com
Description: M365AMA child theme for Kadence
Author: Christian Buckley
Author URI: https://buckleyplanet.com
Template: kadence
Version: 1.0.0
Text Domain: m365ama
*/

/* ─── GLOBAL ─────────────────────────────────────────────────────────────── */

:root {
  --m365-blue: #0BA7E1;
  --m365-blue-light: #E6F6FD;
  --m365-blue-dark: #0880B0;
  --m365-text: #1A1A1A;
  --m365-muted: #666666;
  --m365-border: #E0E0E0;
  --m365-bg: #F5F5F5;
  --m365-white: #FFFFFF;
  --m365-sponsored: #7B4F9E;
  --m365-solution: #27AE60;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: var(--m365-bg);
  color: var(--m365-text);
}

a {
  color: var(--m365-blue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: var(--m365-blue-dark);
}

/* ─── HEADER ─────────────────────────────────────────────────────────────── */

.site-header,
.wp-block-kadence-header,
#masthead {
  background: var(--m365-blue) !important;
  padding: 14px 24px !important;
}

.site-branding .site-title,
.site-title a,
.wp-block-site-title a {
  color: #ffffff !important;
  font-size: 26px !important;
  font-weight: 700 !important;
  letter-spacing: -0.5px !important;
  text-decoration: none !important;
}

.site-description,
.wp-block-site-tagline {
  color: rgba(255,255,255,0.82) !important;
  font-size: 12px !important;
  font-style: italic !important;
  margin-top: 4px !important;
}

/* Nav links */
.main-navigation a,
.nav-primary a,
header nav a {
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 4px 0 !important;
}

.main-navigation a:hover,
header nav a:hover {
  text-decoration: underline !important;
  color: #ffffff !important;
}

/* Ask a Question pill */
.nav-ask-question a,
a.ask-question-btn {
  background: rgba(255,255,255,0.22) !important;
  color: #ffffff !important;
  padding: 5px 14px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,255,255,0.4) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

/* ─── PANELIST BUBBLES ───────────────────────────────────────────────────── */

.m365-panelist-bubbles {
  display: flex;
  align-items: center;
  margin-top: 8px;
  justify-content: flex-end;
}

.m365-panelist-bubble {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  border: 2px solid var(--m365-blue);
  margin-left: -6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
}

.m365-panelist-bubble:first-child {
  margin-left: 0;
}

.m365-panelist-bubble img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.m365-panelist-count {
  font-size: 11px;
  color: rgba(255,255,255,0.8);
  margin-left: 8px;
  text-decoration: underline;
  cursor: pointer;
}

/* ─── MAIN LAYOUT ────────────────────────────────────────────────────────── */

.content-area,
#primary {
  width: 100%;
}

.site-main {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 20px;
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 20px;
}

@media (max-width: 768px) {
  .site-main {
    grid-template-columns: 1fr;
  }
}

/* ─── BLOG INDEX POST CARDS ──────────────────────────────────────────────── */

.m365-post-card {
  background: var(--m365-white);
  border: 1px solid var(--m365-border);
  border-radius: 10px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 220px 1fr;
  margin-bottom: 14px;
  transition: border-color 0.15s;
}

.m365-post-card:hover {
  border-color: var(--m365-blue);
}

.m365-post-thumb {
  width: 220px;
  aspect-ratio: 16/9;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.m365-post-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Sponsored badge on thumbnail */
.m365-sponsored-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--m365-sponsored);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.m365-post-body {
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.m365-post-cat {
  font-size: 10px;
  color: var(--m365-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.m365-post-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--m365-text);
  line-height: 1.4;
  margin: 4px 0 6px;
}

.m365-post-title a {
  color: var(--m365-text);
  text-decoration: none;
}

.m365-post-title a:hover {
  color: var(--m365-blue);
}

.m365-post-excerpt {
  font-size: 12px;
  color: var(--m365-muted);
  line-height: 1.55;
}

.m365-post-meta {
  font-size: 10px;
  color: #999;
  margin-top: 8px;
}

/* ─── SINGLE POST PAGE ───────────────────────────────────────────────────── */

.m365-post-wrap {
  background: var(--m365-white);
  border: 1px solid var(--m365-border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.m365-meta-bar {
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--m365-border);
  flex-wrap: wrap;
}

.m365-topic-tag {
  font-size: 10px;
  color: var(--m365-blue);
  background: var(--m365-blue-light);
  padding: 2px 10px;
  border-radius: 8px;
  border: 1px solid #b3e0f5;
  font-weight: 700;
  text-decoration: none;
}

.m365-post-date {
  font-size: 11px;
  color: #999;
}

.m365-post-byline {
  font-size: 11px;
  color: #999;
}

.m365-pcredits {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.m365-pcredit {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--m365-blue);
  border: 2px solid #fff;
  margin-left: -5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
}

.m365-pcredit:first-child {
  margin-left: 0;
}

.m365-pcredit img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m365-pcredit-label {
  font-size: 10px;
  color: #999;
  margin-left: 6px;
}

.m365-post-headline {
  padding: 18px 18px 0;
}

.m365-post-headline h1 {
  font-size: 22px;
  font-weight: 700;
  color: var(--m365-text);
  line-height: 1.35;
}

.m365-post-intro {
  padding: 10px 18px 0;
  font-size: 13px;
  color: var(--m365-muted);
}

.m365-blockquote {
  margin: 10px 18px 0;
  background: var(--m365-blue-light);
  border-left: 4px solid var(--m365-blue);
  border-radius: 0 8px 8px 0;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--m365-text);
  font-style: italic;
  line-height: 1.65;
}

.m365-checkout {
  padding: 12px 18px 0;
  font-size: 13px;
  color: var(--m365-muted);
}

.m365-yt-embed {
  margin: 10px 18px 0;
  aspect-ratio: 16/9;
  border-radius: 8px;
  overflow: hidden;
}

.m365-yt-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.m365-section {
  padding: 14px 18px;
  border-top: 1px solid var(--m365-border);
}

.m365-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--m365-text);
  margin-bottom: 10px;
}

/* Panelist list */
.m365-panelist-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.m365-panelist-avatar {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: var(--m365-blue);
  flex-shrink: 0;
  overflow: hidden;
}

.m365-panelist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m365-panelist-name {
  font-size: 13px;
  color: var(--m365-blue);
  font-weight: 600;
  text-decoration: none;
}

.m365-panelist-role {
  font-size: 12px;
  color: var(--m365-muted);
}

.m365-panelist-handle {
  font-size: 12px;
  color: #999;
}

/* Notes list */
.m365-notes-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.m365-notes-list li {
  font-size: 12px;
  color: var(--m365-muted);
  padding-left: 14px;
  position: relative;
  margin-bottom: 6px;
  line-height: 1.55;
}

.m365-notes-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: var(--m365-blue);
  font-weight: 900;
}

.m365-notes-list li a {
  color: var(--m365-blue);
}

/* Sponsored notice */
.m365-sponsored-notice {
  background: #f3eef8;
  border: 1px solid #c9b3df;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 11px;
  color: var(--m365-sponsored);
  font-weight: 700;
  margin: 0 18px 14px;
}

.m365-sponsored-notice a {
  color: var(--m365-sponsored);
  text-decoration: underline;
}

/* ─── AUTHOR BIO CARD ────────────────────────────────────────────────────── */

.m365-author-bio {
  background: #f8f8f8;
  border: 1px solid var(--m365-border);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}

.m365-author-bio-photo {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  background: var(--m365-blue);
  flex-shrink: 0;
  overflow: hidden;
}

.m365-author-bio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m365-author-bio-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--m365-text);
}

.m365-author-bio-title {
  font-size: 11px;
  color: var(--m365-muted);
  margin-top: 2px;
}

.m365-author-bio-text {
  font-size: 12px;
  color: var(--m365-muted);
  line-height: 1.6;
  margin-top: 8px;
}

.m365-author-bio-link {
  font-size: 12px;
  color: var(--m365-blue);
  margin-top: 6px;
  display: inline-block;
}

/* ─── RELATED POSTS ──────────────────────────────────────────────────────── */

.m365-related-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--m365-text);
  border-bottom: 1px solid var(--m365-border);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.m365-related-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}

.m365-related-card {
  background: var(--m365-white);
  border: 1px solid var(--m365-border);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  display: block;
  transition: border-color 0.15s;
}

.m365-related-card:hover {
  border-color: var(--m365-blue);
}

.m365-related-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--m365-blue);
}

.m365-related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m365-related-body {
  padding: 8px 12px 10px;
}

.m365-related-cat {
  font-size: 9px;
  color: var(--m365-blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.m365-related-title-text {
  font-size: 12px;
  font-weight: 600;
  color: var(--m365-text);
  line-height: 1.4;
  margin-top: 3px;
}

.m365-related-meta {
  font-size: 10px;
  color: #999;
  margin-top: 4px;
}

/* ─── SIDEBAR ────────────────────────────────────────────────────────────── */

.widget-area,
#secondary {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.widget {
  background: var(--m365-white);
  border: 1px solid var(--m365-border);
  border-radius: 10px;
  padding: 14px 16px;
}

.widget-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--m365-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  border-bottom: none;
}

/* Search widget */
.widget_search .search-field {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 16px;
  padding: 7px 14px;
  font-size: 12px;
  background: #f8f8f8;
}

/* Categories widget */
.widget_categories ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.widget_categories li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid #f0f0f0;
}

.widget_categories li:last-child {
  border-bottom: none;
}

.widget_categories li a {
  color: var(--m365-text);
  text-decoration: none;
}

.widget_categories li a:hover {
  color: var(--m365-blue);
}

.widget_categories .post-count {
  background: var(--m365-blue);
  color: #fff;
  font-size: 9px;
  padding: 1px 7px;
  border-radius: 8px;
}

/* Sponsor widget */
.m365-sponsor-slot {
  border: 1px dashed #ccc;
  border-radius: 8px;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  margin-bottom: 10px;
}

.m365-sponsor-slot img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ─── AUTHORS PAGE ───────────────────────────────────────────────────────── */

.m365-authors-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 900px) {
  .m365-authors-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .m365-authors-grid {
    grid-template-columns: 1fr;
  }
}

.m365-author-card {
  background: var(--m365-white);
  border: 1px solid var(--m365-border);
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  transition: border-color 0.15s;
}

.m365-author-card:hover {
  border-color: var(--m365-blue);
}

.m365-author-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
}

.m365-author-card-photo {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: var(--m365-blue);
  flex-shrink: 0;
  overflow: hidden;
}

.m365-author-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m365-author-card-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--m365-text);
  line-height: 1.3;
}

.m365-author-card-title {
  font-size: 11px;
  color: var(--m365-muted);
  margin-top: 2px;
}

.m365-author-card-bio {
  font-size: 12px;
  color: var(--m365-muted);
  line-height: 1.55;
}

.m365-author-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--m365-border);
  padding-top: 8px;
}

.m365-author-card-posts {
  font-size: 10px;
  color: #999;
}

.m365-author-card-view {
  font-size: 10px;
  color: var(--m365-blue);
}

/* ─── AUTHOR PROFILE PAGE ────────────────────────────────────────────────── */

.m365-profile-hero {
  background: var(--m365-white);
  border: 1px solid var(--m365-border);
  border-radius: 10px;
  padding: 20px;
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.m365-profile-photo {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background: var(--m365-blue);
  flex-shrink: 0;
  overflow: hidden;
}

.m365-profile-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m365-profile-name {
  font-size: 20px;
  font-weight: 700;
  color: var(--m365-text);
}

.m365-profile-title {
  font-size: 13px;
  color: var(--m365-muted);
  margin-top: 3px;
}

.m365-profile-bio {
  font-size: 13px;
  color: var(--m365-muted);
  line-height: 1.65;
  margin-top: 12px;
}

.m365-profile-links {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.m365-profile-link {
  font-size: 11px;
  color: var(--m365-blue);
  background: var(--m365-blue-light);
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid #b3e0f5;
  text-decoration: none;
}

.m365-profile-link:hover {
  background: var(--m365-blue);
  color: #fff;
}

.m365-profile-stats {
  display: flex;
  gap: 24px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--m365-border);
}

.m365-stat-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--m365-text);
}

.m365-stat-label {
  font-size: 10px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 2px;
}

.m365-topic-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.m365-topic-pill {
  font-size: 10px;
  color: var(--m365-blue);
  background: var(--m365-blue-light);
  padding: 3px 10px;
  border-radius: 10px;
  border: 1px solid #b3e0f5;
  cursor: pointer;
  text-decoration: none;
}

.m365-topic-pill:hover,
.m365-topic-pill.active {
  background: var(--m365-blue);
  color: #fff;
  border-color: var(--m365-blue);
}

/* ─── BREADCRUMB ─────────────────────────────────────────────────────────── */

.m365-breadcrumb {
  font-size: 12px;
  color: #999;
  margin-bottom: 12px;
}

.m365-breadcrumb a {
  color: var(--m365-blue);
  text-decoration: none;
}

/* ─── PAGINATION ─────────────────────────────────────────────────────────── */

.m365-pagination {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 20px 0;
}

.m365-page-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: var(--m365-white);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--m365-muted);
  text-decoration: none;
}

.m365-page-btn.active,
.m365-page-btn:hover {
  background: var(--m365-blue);
  color: #fff;
  border-color: var(--m365-blue);
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */

.site-footer,
#colophon {
  background: #e8e8e8 !important;
  padding: 14px 24px !important;
  margin-top: 30px;
}

.site-footer .site-info,
#colophon .site-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #999;
  max-width: 1200px;
  margin: 0 auto;
}

.site-footer a,
#colophon a {
  color: #999;
  text-decoration: none;
}

.site-footer a:hover,
#colophon a:hover {
  color: var(--m365-blue);
}