/*
Theme Name:   s[3]decode Child
Theme URI:    https://s3decode.com/
Description:  Child theme for Hello Elementor — s[3]decode blog
Author:       s[3]decode
Template:     hello-elementor
Version:      1.1.0
Text Domain:  s3decode-child
*/

/* ============================================================
   Brand tokens
   ============================================================ */
:root {
  --s3-cyan:      #00E2F9;
  --s3-black:     #000000;
  --s3-white:     #FFFFFF;
  --s3-gray-100:  #F5F5F5;
  --s3-gray-200:  #E0E0E0;
  --s3-gray-600:  #757575;
  --s3-gray-800:  #212121;

  --s3-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --s3-font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --s3-radius:    6px;
  --s3-radius-lg: 12px;
  --s3-shadow:    0 2px 12px rgba(0,0,0,.08);
  --s3-shadow-lg: 0 8px 32px rgba(0,0,0,.12);

  --s3-max-width: 1140px;
  --s3-content:   780px;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family:            var(--s3-font-sans);
  font-size:              1rem;
  line-height:            1.7;
  color:                  var(--s3-gray-800);
  background-color:       var(--s3-white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  line-height:   1.25;
  font-weight:   700;
  margin-top:    0;
  margin-bottom: .5em;
}

a {
  color:           var(--s3-cyan);
  text-decoration: none;
  transition:      opacity .15s ease;
}
a:hover { opacity: .75; }

img, svg { max-width: 100%; height: auto; display: block; }

/* ============================================================
   Header — Hello Elementor outputs #site-header
   ============================================================ */
#site-header {
  position:      sticky !important;
  top:           0 !important;
  z-index:       1000 !important;
  background:    var(--s3-black) !important;
  border-bottom: 2px solid var(--s3-cyan) !important;
  min-height:    68px;
}

/* Kill any Elementor section background inside the header */
#site-header .elementor-section,
#site-header .elementor-container {
  background-color: transparent !important;
  background-image: none !important;
}

/* Give the Elementor row inside the header proper height + flex alignment */
#site-header .elementor-section > .elementor-container,
#site-header .elementor-container {
  min-height:    68px;
  display:       flex !important;
  align-items:   center !important;
  padding-left:  1.5rem !important;
  padding-right: 1.5rem !important;
}
#site-header .elementor-row {
  display:     flex !important;
  align-items: center !important;
  width:       100%;
}
#site-header .elementor-column-wrap,
#site-header .elementor-widget-wrap {
  display:     flex !important;
  align-items: center !important;
}

/* ── Logo image ── */
#site-header img.custom-logo,
#site-header .site-logo img,
#site-header .elementor-image img {
  height:    48px !important;
  width:     auto !important;
  max-width: 220px !important;
  display:   block;
}

/* ── Text logo fallback (when image logo not yet set) ──
   Styles the site name to look like the brand mark */
#site-header .site-title,
#site-header .site-title a,
#site-header .elementor-heading-title,
#site-header p.elementor-heading-title {
  font-family:    var(--s3-font-mono) !important;
  font-size:      1.35rem !important;
  font-weight:    700 !important;
  letter-spacing: -.01em !important;
  color:          var(--s3-white) !important;
  text-decoration: none !important;
  line-height:    1 !important;
}
/* Cyan accent on the bracket characters s[3]decode */
#site-header .site-title a::before,
#site-header .site-title a::after {
  color: var(--s3-cyan);
}

/* ── Nav links ── */
#site-header .elementor-nav-menu a,
#site-header .elementor-nav-menu--main .elementor-item,
#site-header nav a {
  color:       var(--s3-white) !important;
  font-size:   .9375rem !important;
  font-weight: 500 !important;
}
#site-header .elementor-nav-menu a:hover,
#site-header .elementor-nav-menu--main .elementor-item:hover,
#site-header .elementor-nav-menu--main .elementor-item-active {
  color:   var(--s3-cyan) !important;
  opacity: 1;
}
#site-header .elementor-item::after {
  background-color: var(--s3-cyan) !important;
}

/* ── Mobile hamburger ── */
#site-header .elementor-menu-toggle,
#site-header .elementor-menu-toggle i,
#site-header .elementor-menu-toggle svg {
  color:  var(--s3-white) !important;
  fill:   var(--s3-white) !important;
  border-color: var(--s3-white) !important;
}

/* ── Dropdowns ── */
#site-header .elementor-nav-menu .sub-menu {
  background:  var(--s3-gray-800) !important;
  border-top:  2px solid var(--s3-cyan) !important;
  box-shadow:  var(--s3-shadow-lg) !important;
}
#site-header .elementor-nav-menu .sub-menu a {
  color: var(--s3-white) !important;
}
#site-header .elementor-nav-menu .sub-menu a:hover {
  color:      var(--s3-cyan) !important;
  background: rgba(0,226,249,.08) !important;
}

/* ============================================================
   Main content area — Hello Elementor wraps posts in
   .page-content or .site-content > .content-area > main
   ============================================================ */
.site-content,
.content-area,
#primary {
  width: 100%;
}

/* ============================================================
   Single post layout
   ============================================================ */
.s3-single-wrap {
  max-width: var(--s3-max-width);
  margin:    0 auto;
  padding:   3rem 1.5rem;
  display:   grid;
  grid-template-columns: var(--s3-content) 1fr;
  gap:       3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .s3-single-wrap { grid-template-columns: 1fr; }
  .s3-sidebar     { display: none; }
}

/* Article header */
.s3-article-header { margin-bottom: 2rem; }

.s3-article-cats {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .5rem;
  margin-bottom: 1rem;
}

.s3-article-title {
  font-size:     2.25rem;
  line-height:   1.2;
  margin-bottom: 1rem;
  color:         var(--s3-gray-800);
}

.s3-article-meta {
  font-size:      .875rem;
  color:          var(--s3-gray-600);
  display:        flex;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            1rem;
  padding-bottom: 1.5rem;
  border-bottom:  1px solid var(--s3-gray-200);
  margin-bottom:  2rem;
}

/* Featured image */
.s3-article-featured-img {
  aspect-ratio:  16/9;
  overflow:      hidden;
  border-radius: var(--s3-radius-lg);
  margin-bottom: 2.5rem;
}
.s3-article-featured-img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

/* Hello Elementor also outputs .entry-title inside single posts.
   Hide it — our single.php renders the title inside s3-article-header. */
.single .entry-title,
.single .page-title {
  display: none !important;
}

/* Prose body */
.s3-article-content {
  font-size:   1.0625rem;
  line-height: 1.8;
}
.s3-article-content h2 { font-size: 1.625rem; margin-top: 2.5rem; }
.s3-article-content h3 { font-size: 1.25rem;  margin-top: 2rem; }
.s3-article-content p  { margin-bottom: 1.25rem; }
.s3-article-content ul,
.s3-article-content ol { padding-left: 1.5rem; margin-bottom: 1.25rem; }
.s3-article-content li { margin-bottom: .4rem; }
.s3-article-content blockquote {
  border-left:   4px solid var(--s3-cyan);
  margin:        1.5rem 0;
  padding:       1rem 1.25rem;
  background:    rgba(0,226,249,.06);
  border-radius: 0 var(--s3-radius) var(--s3-radius) 0;
  font-style:    italic;
  color:         var(--s3-gray-600);
}
.s3-article-content code {
  font-family:   var(--s3-font-mono);
  font-size:     .875em;
  background:    var(--s3-gray-100);
  padding:       .15em .4em;
  border-radius: 4px;
}
.s3-article-content pre {
  background:    var(--s3-gray-800);
  color:         var(--s3-cyan);
  font-family:   var(--s3-font-mono);
  font-size:     .875rem;
  line-height:   1.6;
  padding:       1.25rem;
  border-radius: var(--s3-radius-lg);
  overflow-x:    auto;
  margin-bottom: 1.5rem;
}
.s3-article-content pre code { background: transparent; padding: 0; color: inherit; }
.s3-article-content img      { border-radius: var(--s3-radius-lg); margin: 1.5rem 0; }
.s3-article-content a        { text-decoration: underline; text-underline-offset: 3px; }
.s3-article-content hr       { border: none; border-top: 2px solid var(--s3-gray-200); margin: 2.5rem 0; }

/* Tags footer */
.s3-article-footer {
  margin-top:  2rem;
  padding-top: 1.5rem;
  border-top:  1px solid var(--s3-gray-200);
}
.s3-tag-list {
  display:     flex;
  flex-wrap:   wrap;
  gap:         .5rem;
  align-items: center;
}
.s3-tag-label {
  font-size:      .8rem;
  font-weight:    600;
  color:          var(--s3-gray-600);
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ============================================================
   Blog archive / index — post grid
   ============================================================ */
.s3-archive-wrap {
  max-width: var(--s3-max-width);
  margin:    0 auto;
  padding:   3rem 1.5rem;
}

/* Hide Hello Elementor's default archive page title when we render our own */
.blog .page-header,
.archive .page-header {
  display: none;
}

.s3-archive-header { margin-bottom: 2.5rem; }
.s3-archive-title  { font-size: 2rem; color: var(--s3-gray-800); }

.s3-post-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap:                   2rem;
  list-style:            none;
  margin:                0;
  padding:               0;
}

.s3-post-card {
  background:     var(--s3-white);
  border:         1px solid var(--s3-gray-200);
  border-radius:  var(--s3-radius-lg);
  overflow:       hidden;
  box-shadow:     var(--s3-shadow);
  transition:     box-shadow .2s ease, transform .2s ease;
  display:        flex;
  flex-direction: column;
}
.s3-post-card:hover {
  box-shadow: var(--s3-shadow-lg);
  transform:  translateY(-3px);
}

.s3-post-card__thumb         { aspect-ratio: 16/9; overflow: hidden; }
.s3-post-card__thumb img     { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.s3-post-card:hover .s3-post-card__thumb img { transform: scale(1.04); }

.s3-post-card__body {
  padding:        1.25rem;
  flex:           1;
  display:        flex;
  flex-direction: column;
}

.s3-post-card__cats    { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .75rem; }
.s3-post-card__cat {
  font-size:      .7rem;
  font-weight:    600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color:          var(--s3-cyan);
  background:     rgba(0,226,249,.1);
  padding:        .2em .6em;
  border-radius:  var(--s3-radius);
}

.s3-post-card__title            { font-size: 1.1rem; line-height: 1.35; margin-bottom: .5rem; }
.s3-post-card__title a          { color: var(--s3-gray-800); }
.s3-post-card__title a:hover    { color: var(--s3-cyan); opacity: 1; }

.s3-post-card__excerpt {
  font-size:              .9rem;
  color:                  var(--s3-gray-600);
  flex:                   1;
  margin-bottom:          1rem;
  display:                -webkit-box;
  -webkit-line-clamp:     3;
  -webkit-box-orient:     vertical;
  overflow:               hidden;
}

.s3-post-card__meta {
  font-size:   .8rem;
  color:       var(--s3-gray-600);
  display:     flex;
  align-items: center;
  gap:         .75rem;
  margin-top:  auto;
}
.s3-post-card__meta time { white-space: nowrap; }

/* ============================================================
   Tags
   ============================================================ */
.s3-tag {
  display:       inline-block;
  font-size:     .75rem;
  font-weight:   600;
  padding:       .3em .75em;
  border-radius: var(--s3-radius);
  background:    var(--s3-gray-100);
  color:         var(--s3-gray-600);
  transition:    background .15s, color .15s;
}
.s3-tag:hover { background: var(--s3-cyan); color: var(--s3-black); opacity: 1; }

/* ============================================================
   Sidebar
   ============================================================ */
.s3-sidebar {
  position: sticky;
  top:      90px;
}
.s3-sidebar-widget {
  background:    var(--s3-gray-100);
  border-radius: var(--s3-radius-lg);
  padding:       1.25rem;
  margin-bottom: 1.5rem;
}
.s3-sidebar-widget h3 {
  font-size:      .875rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--s3-gray-600);
  margin-bottom:  1rem;
}

/* ============================================================
   Pagination
   ============================================================ */
.s3-pagination {
  display:         flex;
  justify-content: center;
  gap:             .5rem;
  margin-top:      3rem;
}
.s3-pagination a,
.s3-pagination span {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--s3-radius);
  border:          1px solid var(--s3-gray-200);
  font-size:       .875rem;
  font-weight:     600;
  color:           var(--s3-gray-800);
}
.s3-pagination .current,
.s3-pagination a:hover {
  background:   var(--s3-cyan);
  border-color: var(--s3-cyan);
  color:        var(--s3-black);
  opacity:      1;
}

/* ============================================================
   Post card — single-link version (card-post.php v2)
   ============================================================ */
.s3-post-card__link {
  display:        flex;
  flex-direction: column;
  height:         100%;
  color:          inherit;
  text-decoration: none;
}
.s3-post-card__link:hover { opacity: 1; }
.s3-post-card__link:hover .s3-post-card__title { color: var(--s3-cyan); }
.s3-post-card__link:hover .s3-post-card__thumb img { transform: scale(1.04); }
.s3-post-card__title { color: var(--s3-gray-800); transition: color .2s; }

/* ============================================================
   Services list (used by [s3_services_menu] shortcode)
   ============================================================ */
.s3-services-list {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-wrap:  wrap;
  gap:        .75rem 1.5rem;
}
.s3-services-list li a {
  color:       var(--s3-white);
  font-weight: 500;
  font-size:   .9375rem;
}
.s3-services-list li a:hover { color: var(--s3-cyan); opacity: 1; }

/* ============================================================
   "From the Blog" shortcode grid  [s3_latest_posts]
   ============================================================ */
.s3-blog-preview-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   2rem;
  margin-bottom:         2rem;
}
.s3-blog-preview-card {
  display:        flex;
  flex-direction: column;
  background:     var(--s3-white);
  border:         1px solid var(--s3-gray-200);
  border-radius:  var(--s3-radius-lg);
  overflow:       hidden;
  box-shadow:     var(--s3-shadow);
  transition:     box-shadow .2s, transform .2s;
  color:          inherit;
  text-decoration: none;
}
.s3-blog-preview-card:hover {
  box-shadow: var(--s3-shadow-lg);
  transform:  translateY(-3px);
  opacity:    1;
}
.s3-blog-preview-card__thumb { aspect-ratio: 16/9; overflow: hidden; }
.s3-blog-preview-card__thumb img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s;
}
.s3-blog-preview-card:hover .s3-blog-preview-card__thumb img { transform: scale(1.04); }
.s3-blog-preview-card__body  { padding: 1.25rem; display: flex; flex-direction: column; flex: 1; }
.s3-blog-preview-card__title {
  font-size:   1.05rem;
  line-height: 1.35;
  margin:      .5rem 0;
  color:       var(--s3-gray-800);
}
.s3-blog-preview-card:hover .s3-blog-preview-card__title { color: var(--s3-cyan); }
.s3-blog-preview-card__excerpt {
  font-size:   .9rem;
  color:       var(--s3-gray-600);
  flex:        1;
  margin:      0 0 1rem;
}
.s3-blog-preview-card__cta {
  font-size:   .85rem;
  font-weight: 600;
  color:       var(--s3-cyan);
  margin-top:  auto;
}
.s3-blog-preview-more {
  text-align: center;
  margin-top: 1rem;
}

/* CTA buttons */
.s3-btn {
  display:        inline-flex;
  align-items:    center;
  justify-content: center;
  padding:        .65rem 1.5rem;
  border-radius:  var(--s3-radius);
  font-size:      .9375rem;
  font-weight:    600;
  transition:     background .2s, color .2s, border-color .2s;
  text-decoration: none;
}
.s3-btn--outline {
  border:  2px solid var(--s3-cyan);
  color:   var(--s3-cyan);
  background: transparent;
}
.s3-btn--outline:hover {
  background: var(--s3-cyan);
  color:      var(--s3-black);
  opacity:    1;
}

/* ============================================================
   Footer — Hello Elementor outputs #site-footer
   ============================================================ */

/* Prevent double footer: hide any plain Hello Elementor
   copyright bar when an Elementor footer template is present */
body.elementor-page #site-footer .site-info:not(:only-child),
body.elementor-page #site-footer > .site-info ~ .site-info {
  display: none !important;
}

/* Also prevent Elementor from stacking two footer sections */
#site-footer .elementor-location-footer + .elementor-location-footer,
#site-footer > section:not(:first-child)[class*="elementor"] {
  display: none !important;
}

#site-footer {
  background:  var(--s3-black) !important;
  color:       var(--s3-gray-600);
  border-top:  2px solid var(--s3-cyan) !important;
  font-size:   .875rem;
}

#site-footer a { color: var(--s3-cyan); }

/* Kill Elementor section backgrounds inside footer */
#site-footer .elementor-section,
#site-footer .elementor-container {
  background-color: transparent !important;
  background-image: none !important;
}

/* Center and constrain the footer content */
#site-footer .elementor-container {
  max-width:      var(--s3-max-width) !important;
  margin:         0 auto;
  padding-top:    2.5rem;
  padding-bottom: 2.5rem;
  padding-left:   1.5rem;
  padding-right:  1.5rem;
}

/* Multi-column footer columns sit side by side */
#site-footer .elementor-row {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             2rem 1.5rem;
  width:           100%;
}
#site-footer .elementor-column { flex: 1 1 220px; min-width: 0; }

/* Footer headings */
#site-footer h3,
#site-footer .elementor-heading-title {
  color:          var(--s3-white) !important;
  font-size:      1rem !important;
  font-weight:    700 !important;
  margin-bottom:  .75rem !important;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* Plain (no Elementor) footer fallback */
#site-footer .site-info {
  max-width:       var(--s3-max-width);
  margin:          0 auto;
  padding:         2rem 1.5rem;
  display:         flex;
  flex-wrap:       wrap;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
}

/* Footer text */
#site-footer p,
#site-footer .copyright { margin: 0; color: var(--s3-gray-600); }

/* ============================================================
   Responsive breakpoints — mobile-first from 1200px down
   ============================================================ */

/* ── Large desktop 1200px+ already handled by defaults ── */

/* ── Tablet landscape  992px ── */
@media (max-width: 992px) {
  .s3-single-wrap {
    grid-template-columns: 1fr;
    padding: 2.5rem 1.5rem;
  }
  .s3-sidebar { display: none; }

  .s3-archive-wrap  { padding: 2.5rem 1.5rem; }
  .s3-blog-preview-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

  #site-footer .elementor-column { flex: 1 1 200px; }
}

/* ── Tablet portrait  768px ── */
@media (max-width: 768px) {
  .s3-article-title   { font-size: 1.75rem; }
  .s3-archive-title   { font-size: 1.625rem; }

  .s3-post-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
  .s3-blog-preview-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }

  .s3-article-content h2 { font-size: 1.375rem; }
  .s3-article-content h3 { font-size: 1.125rem; }

  #site-footer .elementor-row   { gap: 1.5rem 1rem; }
  #site-footer .elementor-column { flex: 1 1 180px; }
  #site-footer .elementor-container { padding-top: 2rem; padding-bottom: 2rem; }
}

/* ── Small phone landscape  576px ── */
@media (max-width: 576px) {
  .s3-archive-wrap  { padding: 1.5rem 1rem; }
  .s3-single-wrap   { padding: 1.5rem 1rem; }

  .s3-article-title  { font-size: 1.5rem; }
  .s3-archive-title  { font-size: 1.375rem; }

  .s3-post-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .s3-blog-preview-grid { grid-template-columns: 1fr; gap: 1.25rem; }

  .s3-article-content        { font-size: 1rem; }
  .s3-article-content h2     { font-size: 1.25rem; }
  .s3-article-content h3     { font-size: 1.0625rem; }

  .s3-pagination a,
  .s3-pagination span        { width: 34px; height: 34px; font-size: .8rem; }

  #site-footer .elementor-row    { flex-direction: column; }
  #site-footer .elementor-column { flex: 1 1 100%; }
  #site-footer .site-info        { flex-direction: column; text-align: center; }
}

/* ── Tiny phone  480px ── */
@media (max-width: 480px) {
  #site-header .elementor-nav-menu--main .elementor-item { font-size: .875rem !important; }

  .s3-article-title  { font-size: 1.35rem; }
  .s3-blog-preview-card__title { font-size: .95rem; }

  .s3-pagination { gap: .3rem; }
  .s3-pagination a,
  .s3-pagination span { width: 30px; height: 30px; font-size: .75rem; }
}

/* ── Legacy 640px rule kept for footer fallback ── */
@media (max-width: 640px) {
  #site-footer .site-info { flex-direction: column; text-align: center; }
}

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