/*
 * Southern Cloud Works — Hostinger reference fidelity layer
 * Version 1.3.0
 *
 * This translates the visual system from the supplied Hostinger/Vite build
 * into semantic WordPress theme selectors. WordPress remains responsible for
 * the content and templates; this file deliberately contains no React/Vite code.
 */

:root {
  --scw-bg: hsl(220 33% 98%);
  --scw-surface: hsl(0 0% 100%);
  --scw-ink: hsl(222 47% 9%);
  --scw-muted: hsl(220 12% 42%);
  --scw-line: hsl(220 18% 90%);
  --scw-input: hsl(220 18% 86%);
  --scw-primary: hsl(217 69% 16%);
  --scw-secondary: hsl(220 20% 95%);
  --scw-navy: hsl(219 66% 11%);
  --scw-navy-fg: hsl(213 40% 85%);
  --scw-aqua: hsl(174 84% 32%);
  --scw-aqua-dark: hsl(174 84% 32%);
  --scw-aqua-soft: hsl(174 84% 32% / .05);
  --scw-radius: 12px;
  --scw-content: 72rem;
  --scw-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1);
}

html { scroll-behavior: smooth; }
body {
  overflow-x: clip;
  background: var(--scw-bg);
  color: var(--scw-ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4,h5,h6 { font-family: Archivo, Inter, ui-sans-serif, sans-serif; }
code,kbd,samp,pre,.scw-eyebrow,.scw-section-head h2,.scw-card-kicker,.scw-footer-title,.scw-category-count,.scw-archive-topic-label,.scw-archive-count {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.scw-container { width: min(calc(100% - 2rem), 72rem); margin-inline: auto; }
@media (min-width:640px) { .scw-container { width: min(calc(100% - 3rem), 72rem); } }

/* Header — mirrors h-16 / max-w-6xl / gap-7 from the reference build. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  border-bottom: 1px solid hsl(220 18% 90% / .7);
  background: hsl(220 33% 98% / .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.admin-bar .site-header { top: 32px; }
.scw-header-inner { min-height: 64px; gap: 28px; }
.scw-brand { gap: 10px; min-width: 0; }
.scw-brand-symbol { flex: 0 0 34px; }
.scw-brand-copy { line-height: 1.05; }
.scw-brand-copy strong,
.scw-brand-copy span { font-family: Archivo, Inter, sans-serif; font-size: 15px; font-weight: 700; letter-spacing: -.025em; }
.scw-brand-copy strong { color: var(--scw-ink); }
.scw-brand-copy span { color: var(--scw-aqua); }
.custom-logo-link { max-width: 150px; }
.custom-logo { display:block; max-height: 38px; max-width:150px; width:auto; }
.primary-menu { gap: 28px; }
.primary-menu a { padding: 21px 0 18px; color: var(--scw-muted); font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.primary-menu a:hover,.primary-menu .current-menu-item>a { color: var(--scw-ink); }
.primary-menu .current-menu-item>a::after,.primary-menu a:hover::after { bottom: 13px; height: 2px; background: var(--scw-aqua); }
.scw-search-toggle,.scw-menu-toggle { width:40px; height:40px; border-radius:8px; color:var(--scw-muted); }
.scw-search-toggle:hover,.scw-menu-toggle:hover { background:var(--scw-secondary); color:var(--scw-ink); }

/* Hero — direct translation of the Hostinger classes. */
.scw-hero { position:relative; overflow:hidden; padding:64px 0; }
.scw-hero::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle,hsl(222 47% 9% / .09) 1px,transparent 1px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 30% 40%,#000,transparent);
  mask-image:radial-gradient(ellipse 60% 60% at 30% 40%,#000,transparent);
}
.scw-hero-grid { position:relative; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; }
.scw-eyebrow { color:var(--scw-aqua); font-size:.75rem; line-height:1rem; font-weight:600; letter-spacing:.24em; }
.scw-hero h1 {
  max-width:none;
  margin:16px 0 0;
  font-family:Archivo,Inter,sans-serif;
  font-size:3.75rem;
  font-weight:900;
  line-height:1.04;
  letter-spacing:-.03em;
}
.scw-hero p { max-width:28rem; margin:20px 0 0; color:var(--scw-muted); font-size:1.125rem; line-height:1.625; }
.scw-actions { margin-top:32px; gap:12px; }
.scw-button { padding:12px 20px; border-radius:8px; font-size:.875rem; line-height:1.25rem; font-weight:600; transition:all .18s ease; }
.scw-button:active { transform:scale(.98); }
.scw-button--primary { background:var(--scw-primary); color:#fff; box-shadow:var(--scw-shadow); }
.scw-button--primary:hover { background:hsl(217 69% 20%); color:#fff; transform:none; }
.scw-button--secondary { border-color:var(--scw-input); background:var(--scw-surface); color:var(--scw-ink); }
.scw-button--secondary:hover { border-color:hsl(174 84% 32% / .6); color:var(--scw-aqua); transform:none; }
.scw-hero-art { width:100%; position:relative; }
.scw-hero-art img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  object-fit:cover;
  border:1px solid var(--scw-line);
  border-radius:16px;
  box-shadow:14px 14px 0 0 hsl(174 84% 32% / .14);
}
.scw-art-label {
  left:-12px;
  bottom:-20px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 16px;
  border:1px solid var(--scw-line);
  border-radius:12px;
  background:var(--scw-surface);
  box-shadow:0 10px 15px -3px rgb(0 0 0 / .1),0 4px 6px -4px rgb(0 0 0 / .1);
  color:var(--scw-muted);
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  line-height:1rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.scw-art-label::before { width:10px; height:10px; margin:0; background:var(--scw-aqua); box-shadow:0 0 0 4px hsl(174 84% 32% / .14); }

/* Section rhythm / headings. */
.scw-section { padding:56px 0; }
.scw-section-head { margin:0 0 32px; padding:0; border:0; gap:16px; }
.scw-section-head h2 { order:1; flex:0 0 auto; font-size:.75rem; line-height:1rem; font-weight:600; letter-spacing:.22em; }
.scw-section-head::after { content:""; order:2; flex:1 1 auto; height:1px; background:var(--scw-line); }
.scw-section-link { order:3; flex:0 0 auto; color:var(--scw-muted); font-size:.875rem; line-height:1.25rem; font-weight:500; }
.scw-section-link:hover { color:var(--scw-aqua); }

/* Article cards. */
.scw-featured-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.scw-card {
  border:1px solid var(--scw-line);
  border-radius:16px;
  background:var(--scw-surface);
  transition:box-shadow .3s ease,border-color .3s ease;
  transform:none;
}
.scw-card:hover { transform:none; box-shadow:8px 8px 0 0 hsl(174 84% 32% / .12); }
.scw-card--lead { grid-column:1/-1; grid-template-columns:repeat(2,minmax(0,1fr)); }
.scw-card--lead:hover { box-shadow:10px 10px 0 0 hsl(174 84% 32% / .12); }
.scw-card-media { min-height:0; background:var(--scw-navy); }
.scw-card--lead .scw-card-media { min-height:0; }
.scw-card-media img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.scw-card:not(.scw-card--lead) .scw-card-media { aspect-ratio:3/2; }
.scw-card:hover .scw-card-media img { transform:scale(1.03); }
.scw-card-body { padding:20px; }
.scw-card--lead .scw-card-body { justify-content:center; padding:32px; }
.scw-card-kicker { margin:0; color:var(--scw-aqua); font-size:11px; line-height:1rem; font-weight:600; letter-spacing:.2em; }
.scw-card-title { margin:8px 0 0; font-family:Archivo,Inter,sans-serif; font-size:1.125rem; line-height:1.375; font-weight:700; letter-spacing:-.025em; }
.scw-card--lead .scw-card-title { margin-top:12px; font-size:1.7rem; line-height:1.25; font-weight:800; }
.scw-card-title a:hover { color:var(--scw-aqua); }
.scw-card-excerpt { margin:8px 0 0; color:var(--scw-muted); font-size:.875rem; line-height:1.625; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
.scw-card--lead .scw-card-excerpt { margin-top:12px; -webkit-line-clamp:4; }
.scw-card-meta { margin-top:auto; padding-top:20px; color:var(--scw-muted); font-size:.75rem; line-height:1rem; }
.scw-card--lead .scw-card-meta { padding-top:24px; }
.scw-read-more { width:fit-content; margin-top:16px; padding-top:16px; border-top:1px solid var(--scw-line); color:var(--scw-primary); font-size:.875rem; line-height:1.25rem; font-weight:600; }
.scw-card--lead .scw-read-more { margin-top:20px; padding-top:0; border-top:0; }
.scw-read-more:hover { color:var(--scw-aqua); }
.scw-post-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.scw-post-grid .scw-card-media { aspect-ratio:3/2; }
.scw-post-grid .scw-card-body { padding:20px; }
.scw-post-grid .scw-card-title { font-size:1.125rem; }
.scw-post-grid .scw-card-excerpt { font-size:.875rem; }

/* Build-room band. */
.scw-news-band { position:relative; overflow:hidden; padding:40px 0; background:var(--scw-navy); }
.scw-news-band::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.6; background-image:radial-gradient(circle,rgba(255,255,255,.09) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:linear-gradient(90deg,#000,transparent 70%); mask-image:linear-gradient(90deg,#000,transparent 70%); }
.scw-news-inner { position:relative; gap:24px; }
.scw-news-copy { gap:20px; }
.scw-news-icon { width:56px; height:56px; flex:0 0 56px; border:1px solid rgb(255 255 255 / .15); background:rgb(255 255 255 / .1); color:#fff; }
.scw-news-copy h3 { font-family:Archivo,Inter,sans-serif; margin:0; color:#fff; font-size:1.25rem; line-height:1.75rem; font-weight:700; letter-spacing:-.025em; }
.scw-news-copy p { margin-top:4px; color:hsl(213 40% 85% / .8); font-size:.875rem; line-height:1.25rem; }
.scw-news-status { color:hsl(213 40% 85% / .7); font-size:.875rem; line-height:1.25rem; text-align:right; }

/* Topic tiles. */
.scw-topic-list { grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.scw-topic { min-height:52px; gap:12px; padding:14px 16px; border:1px solid var(--scw-line); border-radius:12px; background:var(--scw-surface); font-size:.875rem; line-height:1.25rem; font-weight:600; transition:all .2s ease; }
.scw-topic:hover { border-color:hsl(174 84% 32% / .5); color:var(--scw-ink); box-shadow:6px 6px 0 0 hsl(174 84% 32% / .12); }
.scw-topic-icon { color:var(--scw-aqua); }
.scw-topic-count { min-width:0; height:auto; padding:2px 8px; border-radius:6px; background:var(--scw-secondary); color:var(--scw-muted); font-size:.75rem; line-height:1rem; font-weight:400; }

/* About / coverage map. */
.scw-about { border-top:1px solid var(--scw-line); background:hsl(220 20% 95% / .4); }
.scw-about.scw-section { padding:64px 0; }
.scw-about-grid { gap:40px; align-items:center; }
.scw-about h2 { margin:16px 0 0; font-size:2.25rem; line-height:2.5rem; font-weight:800; letter-spacing:-.025em; }
.scw-about p { margin-top:20px; color:var(--scw-muted); line-height:1.625; }
.scw-notice { margin-top:24px; padding:16px; border:1px solid hsl(174 84% 32% / .3); border-radius:12px; background:hsl(174 84% 32% / .05); color:var(--scw-ink); font-size:.875rem; font-weight:500; }
.scw-category-panel { padding:32px; border:1px solid var(--scw-line); border-radius:16px; box-shadow:var(--scw-shadow); }
.scw-category-row { padding:0 0 16px; margin-bottom:16px; border-bottom:0; font-size:.875rem; }
.scw-category-row:last-child { margin-bottom:0; padding-bottom:0; }
.scw-category-name { font-weight:500; }
.scw-category-count { color:var(--scw-muted); font-size:.75rem; }
.scw-category-bar { height:6px; margin-top:6px; border-radius:999px; background:var(--scw-secondary); overflow:hidden; }
.scw-category-bar span { border-radius:999px; background:var(--scw-aqua); }

/* Footer. */
.site-footer { padding:56px 0; background:var(--scw-navy); color:var(--scw-navy-fg); }
.scw-footer-grid { grid-template-columns:5fr 2fr 2fr 3fr; gap:40px; }
.site-footer .custom-logo-link { display:inline-block; padding:12px; border-radius:12px; background:#fff; max-width:170px; }
.site-footer .custom-logo { max-height:36px; }
.site-footer .scw-brand { display:inline-flex; padding:12px; border-radius:12px; background:#fff; }
.site-footer .scw-brand-copy strong { color:var(--scw-ink); }
.scw-footer-intro { margin-top:20px; max-width:20rem; color:hsl(213 40% 85% / .8); font-size:.875rem; line-height:1.625; }
.scw-footer-title { margin:0; color:#fff; font-size:11px; line-height:1rem; font-weight:600; letter-spacing:.2em; }
.footer-menu,.scw-footer-links { margin-top:16px; }
.footer-menu li { margin-bottom:10px; }
.footer-menu a,.scw-footer-links a,.scw-footer-note { color:hsl(213 40% 85% / .8); font-size:.875rem; line-height:1.25rem; }
.scw-footer-note + .scw-footer-note { margin-top:12px; color:hsl(213 40% 85% / .6); }
.scw-socials { margin-top:20px; gap:8px; }
.scw-socials a { width:36px; height:36px; border-color:rgb(255 255 255 / .15); color:hsl(213 40% 85% / .8); }
.scw-socials a:hover { border-color:var(--scw-aqua); color:#fff; }
.scw-footer-bottom { margin-top:48px; padding-top:24px; border-top-color:rgb(255 255 255 / .1); color:hsl(213 40% 85% / .6); font-size:.75rem; line-height:1rem; }

/* Archive/category pages inherit the same visual language. */
.scw-archive-hero { padding:56px 0; }
.scw-archive-hero h1,.scw-page-head h1 { font-family:Archivo,Inter,sans-serif; font-weight:900; letter-spacing:-.03em; }
.scw-archive-intro h1 { margin-top:12px; font-size:3rem; line-height:1; }
.scw-archive-description { margin-top:16px; color:var(--scw-muted); line-height:1.625; }
.scw-archive-panel { border-radius:16px; }
.scw-archive-topics { border-color:var(--scw-line); }
.scw-archive-topic { border-radius:999px; }
.scw-archive-content { padding:56px 0; }
.scw-archive-lead { margin-bottom:20px; }

/* Single posts/pages — same typography used by the Hostinger article template. */
.scw-page-head { padding:56px 0 28px; }
.scw-article { border-radius:16px; }
.scw-article-header h1 { font-family:Archivo,Inter,sans-serif; font-weight:900; line-height:1.08; letter-spacing:-.025em; }
.entry-content { font-size:17px; line-height:2rem; color:hsl(222 47% 9% / .8); }
.entry-content h2 { font-family:Archivo,Inter,sans-serif; font-weight:700; letter-spacing:-.025em; }
.entry-content pre { border-radius:12px; background:var(--scw-navy); color:#99f6e4; font-family:"JetBrains Mono",monospace; font-size:13px; line-height:1.625; }
.entry-content blockquote { border-left:2px solid var(--scw-aqua); font-family:Archivo,Inter,sans-serif; font-size:1.125rem; font-style:italic; font-weight:500; line-height:1.625; color:hsl(222 47% 9% / .9); }

/* Subtle entrance motion inspired by the original Framer Motion build. */
@media (prefers-reduced-motion:no-preference) {
  .scw-hero-copy,.scw-hero-art,.scw-featured-grid,.scw-post-grid,.scw-topic-list,.scw-about-grid {
    animation:scw-fade-up .5s cubic-bezier(.2,.7,.2,1) both;
  }
  .scw-hero-art { animation-delay:.08s; }
  @keyframes scw-fade-up { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
}

@media (max-width:1023px) {
  .scw-hero-grid { grid-template-columns:1fr; }
  .scw-hero-art { max-width:42rem; }
  .scw-topic-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scw-post-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .scw-footer-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:767px) {
  body.admin-bar .site-header { top:46px; }
  .scw-container { width:min(calc(100% - 2rem),72rem); }
  .scw-hero { padding:64px 0; }
  .scw-hero h1 { font-size:2.6rem; }
  .scw-art-label { display:none; }
  .scw-featured-grid,.scw-card--lead,.scw-about-grid,.scw-footer-grid { grid-template-columns:1fr; }
  .scw-card--lead .scw-card-media { aspect-ratio:3/2; }
  .scw-post-grid { grid-template-columns:1fr; }
  .scw-news-inner { align-items:flex-start; }
  .scw-news-status { text-align:left; }
  .scw-topic-list { grid-template-columns:1fr; }
}

@media (max-width:639px) {
  .scw-section { padding:48px 0; }
  .scw-section-head { margin-bottom:24px; }
  .scw-section-link { font-size:.78rem; }
  .scw-hero h1 { font-size:2.6rem; }
  .scw-hero p { font-size:1rem; }
  .scw-card--lead .scw-card-body { padding:24px; }
  .scw-card--lead .scw-card-title { font-size:1.5rem; }
  .scw-about h2 { font-size:1.875rem; line-height:2.25rem; }
  .scw-category-panel { padding:24px; }
}