/*
 * Unified blog article body styling.
 * MUST stay identical to cloudtech.eu's src/styles/wp-blocks.css so a Gutenberg
 * post pasted into any site's WordPress renders the same. Scoped to .wp-content.
 * Self-hosts Montserrat (same weights as cloudtech: 400/600 + italics).
 */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-latin-400-normal.woff2') format('woff2'),
       url('../fonts/montserrat-latin-400-normal.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-latin-600-normal.woff2') format('woff2'),
       url('../fonts/montserrat-latin-600-normal.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat-latin-400-italic.woff2') format('woff2'),
       url('../fonts/montserrat-latin-400-italic.woff') format('woff');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-latin-600-italic.woff2') format('woff2'),
       url('../fonts/montserrat-latin-600-italic.woff') format('woff');
}

.wp-content {
  font-family: 'Montserrat', sans-serif;
  line-height: 1.8;
  color: #374151;
  text-align: justify;
}

.wp-content h1,
.wp-content h2,
.wp-content h3,
.wp-content h4,
.wp-content h5,
.wp-content h6 {
  font-weight: 600;
  color: #0e4a5c;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
}

.wp-content h1 { font-size: 2em; }
.wp-content h2 { font-size: 1.6em; }
.wp-content h3 { font-size: 1.35em; }
.wp-content h4 { font-size: 1.15em; }

.wp-content p {
  margin-bottom: 1.25em;
}

.wp-content a {
  color: #f97316;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wp-content a:hover {
  color: #ea580c;
}

.wp-content ul,
.wp-content ol {
  margin-left: 1.5em;
  margin-bottom: 1.25em;
  padding-left: 0.5em;
}

.wp-content ul { list-style-type: disc; }
.wp-content ol { list-style-type: decimal; }

.wp-content li {
  margin-bottom: 0.5em;
  line-height: 1.7;
}

.wp-content li > ul,
.wp-content li > ol {
  margin-top: 0.5em;
  margin-bottom: 0;
}

.wp-content img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 1em 0;
}

.wp-content figure {
  margin: 1.5em 0;
}

.wp-content figcaption {
  font-size: 0.85em;
  color: #6b7280;
  text-align: center;
  margin-top: 0.5em;
}

.wp-content blockquote {
  border-left: 4px solid #f97316;
  padding: 1em 1.5em;
  margin: 1.5em 0;
  background: #f9fafb;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #4b5563;
}

.wp-content blockquote p {
  margin-bottom: 0.5em;
}

.wp-content blockquote cite {
  display: block;
  font-size: 0.85em;
  color: #6b7280;
  margin-top: 0.5em;
  font-style: normal;
}

.wp-content pre {
  background: #1f2937;
  color: #e5e7eb;
  padding: 1.25em;
  border-radius: 8px;
  overflow-x: auto;
  margin: 1.5em 0;
  font-size: 0.9em;
  line-height: 1.6;
}

.wp-content code {
  background: #f3f4f6;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.9em;
  color: #dc2626;
}

.wp-content pre code {
  background: none;
  padding: 0;
  color: inherit;
}

.wp-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5em 0;
  font-size: 0.95em;
}

.wp-content th,
.wp-content td {
  border: 1px solid #e5e7eb;
  padding: 0.75em 1em;
  text-align: left;
}

.wp-content th {
  background: #f9fafb;
  font-weight: 600;
  color: #0e4a5c;
}

.wp-content tr:nth-child(even) {
  background: #f9fafb;
}

.wp-content hr {
  border: none;
  border-top: 2px solid #e5e7eb;
  margin: 2em 0;
}

/* WordPress alignment */
.wp-content .aligncenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.wp-content .alignleft {
  float: left;
  margin-right: 1.5em;
  margin-bottom: 1em;
}

.wp-content .alignright {
  float: right;
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.wp-content .alignwide {
  max-width: 100%;
  width: 100%;
}

.wp-content .alignfull {
  max-width: 100vw;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Block-level text alignment (Gutenberg block supports) */
.wp-content .has-text-align-center { text-align: center; }
.wp-content .has-text-align-left { text-align: left; }
.wp-content .has-text-align-right { text-align: right; }

/* WordPress blocks */
.wp-content .wp-block-image {
  margin: 1.5em 0;
}

.wp-content .wp-block-image img {
  display: block;
}

.wp-content .wp-block-image.is-style-rounded img {
  border-radius: 50%;
}

.wp-content .wp-block-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.5em;
  margin: 1.5em 0;
}

.wp-content .wp-block-columns {
  display: flex;
  gap: 2em;
  margin: 1.5em 0;
}

.wp-content .wp-block-column {
  flex: 1;
}

.wp-content .wp-block-separator {
  border: none;
  border-top: 2px solid #e5e7eb;
  margin: 2em auto;
  width: 100px;
}

.wp-content .wp-block-separator.is-style-wide {
  width: 100%;
}

.wp-content .wp-block-separator.is-style-dots {
  border: none;
  text-align: center;
  width: auto;
}

.wp-content .wp-block-separator.is-style-dots::before {
  content: "\00b7\00b7\00b7";
  font-size: 1.5em;
  letter-spacing: 1em;
  color: #9ca3af;
}

/* WordPress colors */
.wp-content .has-background { padding: 1em; border-radius: 8px; }
.wp-content .has-black-color { color: #000; }
.wp-content .has-white-color { color: #fff; }
.wp-content .has-pale-pink-background-color { background-color: #f78da7; }
.wp-content .has-vivid-red-background-color { background-color: #cf2e2e; }
.wp-content .has-luminous-vivid-orange-background-color { background-color: #ff6900; }
.wp-content .has-luminous-vivid-amber-background-color { background-color: #fcb900; }
.wp-content .has-light-green-cyan-background-color { background-color: #7bdcb5; }
.wp-content .has-vivid-green-cyan-background-color { background-color: #00d084; }
.wp-content .has-pale-cyan-blue-background-color { background-color: #8ed1fc; }
.wp-content .has-vivid-cyan-blue-background-color { background-color: #0693e3; }
.wp-content .has-vivid-purple-background-color { background-color: #9b51e0; }
.wp-content .has-cyan-bluish-gray-background-color { background-color: #abb8c3; }

/* WordPress font sizes */
.wp-content .has-small-font-size { font-size: 0.8em; }
.wp-content .has-normal-font-size { font-size: 1em; }
.wp-content .has-medium-font-size { font-size: 1.25em; }
.wp-content .has-large-font-size { font-size: 1.5em; }
.wp-content .has-x-large-font-size { font-size: 2em; }
.wp-content .has-huge-font-size { font-size: 2.5em; }

/* WordPress button */
.wp-content .wp-block-button {
  margin: 1em 0;
}

.wp-content .wp-block-button__link {
  display: inline-block;
  padding: 0.75em 1.5em;
  background: #f97316;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.2s;
}

.wp-content .wp-block-button__link:hover {
  background: #ea580c;
  color: #fff;
}

/* WordPress embed/video */
.wp-content .wp-block-embed,
.wp-content .wp-block-video {
  margin: 1.5em 0;
}

.wp-content .wp-block-embed iframe,
.wp-content .wp-block-video video {
  max-width: 100%;
  border-radius: 8px;
}

/* WordPress pullquote */
.wp-content .wp-block-pullquote {
  border-top: 3px solid #f97316;
  border-bottom: 3px solid #f97316;
  padding: 1.5em 0;
  margin: 2em 0;
  text-align: center;
}

.wp-content .wp-block-pullquote blockquote {
  border-left: none;
  background: none;
  padding: 0;
}

/* WordPress cover block */
.wp-content .wp-block-cover {
  position: relative;
  padding: 2em;
  border-radius: 8px;
  overflow: hidden;
  margin: 1.5em 0;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
  .wp-content .wp-block-columns {
    flex-direction: column;
  }

  .wp-content .alignleft,
  .wp-content .alignright {
    float: none;
    margin: 1em 0;
  }
}