/*
 * W1Network Pro — Responsive Layout Fix v8.1
 * File: css/responsive-fix.css
 *
 * PROBLEM SOLVED:
 *   - Text appears only on the left side on desktop (right half blank)
 *   - Words cut off or invisible on mobile
 *   - Fixed widths break narrow screens
 *   - Content overflows or clips on small viewports
 *
 * HOW TO ADD THIS FILE:
 *   1. Upload this file to your theme's /css/ folder via FTP or File Manager.
 *   2. In functions.php, inside w1network_pro_scripts(), add:
 *
 *        wp_enqueue_style(
 *            'w1network-responsive-fix',
 *            get_template_directory_uri() . '/css/responsive-fix.css',
 *            array( 'w1network-pro-style' ),
 *            '8.1.0'
 *        );
 *
 *   3. Save. Done. No other file changes needed.
 *
 * ALTERNATIVELY — paste into Appearance > Customize > Additional CSS
 *   (Scroll to the bottom of this file for the condensed paste version.)
 *
 * BREAKPOINTS USED:
 *   Desktop wide  : > 1200px
 *   Desktop       : 960px – 1200px
 *   Tablet        : 641px – 959px
 *   Mobile large  : 481px – 640px
 *   Mobile small  : ≤ 480px
 */

/* ==========================================================================
   0. VIEWPORT META — handled in header.php (verified present)
      Reminder: <meta name="viewport" content="width=device-width, initial-scale=1.0">
   ========================================================================== */

/* ==========================================================================
   1. GLOBAL BOX MODEL & OVERFLOW GUARD
      Root cause fix: anything with width:100% + padding causes overflow
      unless box-sizing:border-box is set on every element.
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  /* Prevent any single element from blowing out the page width */
  max-width: 100%;
}

html {
  overflow-x: hidden;          /* Stop horizontal scroll at root */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  width: 100%;
  min-width: 0;                /* Flex/grid children: allow shrinking below content size */
}

/* ==========================================================================
   2. ROOT LAYOUT CONTAINERS
      .site → flex column so main grows and footer sticks
      .site-main → flex:1, full width
   ========================================================================== */
.site {
  display:        flex;
  flex-direction: column;
  min-height:     100vh;
  width:          100%;
  overflow-x:     hidden;
}

.site-main {
  flex:      1;
  width:     100%;
  min-width: 0;
  overflow-x: hidden;
}

/* ==========================================================================
   3. CONTENT WRAPPER — the primary page container
      Fix: was using max-width with no responsive padding, causing right-side
      dead space on wide screens and clipping on narrow ones.
   ========================================================================== */
.content-wrapper {
  width:         100%;
  max-width:     1440px;         /* matches --max-w token */
  margin-inline: auto;
  padding:       clamp(1rem, 3vw, 2rem) clamp(1rem, 4vw, 2.5rem);
  box-sizing:    border-box;
  min-width:     0;
}

/* ==========================================================================
   4. CONTAINER UTILITY — used by header, tabs, feed sections
   ========================================================================== */
.container {
  width:         100%;
  max-width:     1440px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
  box-sizing:    border-box;
}

/* ==========================================================================
   5. SINGLE POST LAYOUT — the most reported broken layout
      Root cause: .single-post-content had max-width:860px with no width:100%,
      so on narrow screens it collapsed to left edge only.
   ========================================================================== */

/* The article header (title, meta, image) — full-width within wrapper */
.single-post-header {
  width:    100%;
  max-width: 100%;
  min-width: 0;
}

/* Auto-scroll content wrapper — must be full width */
.ar-content-wrapper {
  width:    100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
}

/* The actual post body text — centred, readable width */
.single-post-content {
  width:         100%;
  max-width:     700px;          /* optimal reading width */
  margin-inline: auto;           /* centres within the wrapper */
  box-sizing:    border-box;
  min-width:     0;
  /* Break long words / URLs — prevents overflow on mobile */
  overflow-wrap: break-word;
  word-break:    break-word;
  hyphens:       auto;
}

/* Paragraphs inside content — remove fixed max-width that causes left-only text */
.single-post-content p {
  width:         100%;
  max-width:     100%;           /* override any inherited 70ch limit */
  margin-bottom: 1.4em;
  overflow-wrap: break-word;
  word-break:    break-word;
}

/* Global p max-width override — the base theme sets p { max-width: 70ch }
   which is great for single posts but breaks full-width UI paragraphs     */
p {
  overflow-wrap: break-word;
  word-break:    break-word;
}

/* On non-post pages, remove the 70ch constraint from UI paragraphs */
.card p,
.post-card p,
.archive-description,
.no-results-message,
.error-404-message {
  max-width: 100%;
}

/* ==========================================================================
   6. POST TITLE — scales fluidly, never overflows
   ========================================================================== */
.single-post-title {
  font-size:    clamp(1.5rem, 4.5vw, 2.5rem);
  line-height:  1.2;
  overflow-wrap: break-word;
  word-break:   break-word;
  hyphens:      auto;
  max-width:    100%;
  width:        100%;
}

/* ==========================================================================
   7. FEATURED IMAGE / THUMBNAILS — always fill container, never overflow
   ========================================================================== */
.post-thumbnail,
.post-thumbnail img,
.post-thumbnail video {
  width:      100%;
  max-width:  100%;
  height:     auto;
  display:    block;
  object-fit: cover;
}

/* Card thumbnails keep aspect ratio */
.post-card .post-thumbnail {
  aspect-ratio: 16 / 9;
  overflow:     hidden;
}

/* All images in post content */
.single-post-content img,
.entry-content img,
.page-content img {
  width:         100%;
  max-width:     100%;
  height:        auto;
  display:       block;
  border-radius: 8px;
}

/* WordPress-inserted images with float — remove floats on mobile */
.single-post-content .alignleft,
.single-post-content .alignright {
  float:     none;
  display:   block;
  max-width: 100%;
  margin:    1em auto;
}
@media (min-width: 640px) {
  .single-post-content .alignleft  { float: left;  margin: 0.5em 1.5em 0.5em 0; max-width: 45%; }
  .single-post-content .alignright { float: right; margin: 0.5em 0 0.5em 1.5em; max-width: 45%; }
}

/* ==========================================================================
   8. POSTS GRID — responsive columns at every breakpoint
   ========================================================================== */
.posts-grid,
.tiktok-feed .posts-grid {
  display: grid;
  gap:     clamp(0.75rem, 2vw, 1rem);
  width:   100%;
  /* 1 column on very small screens, up to 4 on large desktops */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/* Explicit column counts at named breakpoints */
@media (max-width: 479px)  { .posts-grid { grid-template-columns: 1fr; } }
@media (min-width: 480px) and (max-width: 767px)  { .posts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 768px) and (max-width: 1023px) { .posts-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .posts-grid { grid-template-columns: repeat(4, 1fr); } }

/* ==========================================================================
   9. POST CARDS — full width, no fixed dimensions
   ========================================================================== */
.post-card {
  width:    100%;
  max-width: 100%;
  min-width: 0;
  display:  flex;
  flex-direction: column;
  overflow: hidden;           /* clip thumbnail zoom effect cleanly */
}

.post-card .post-content {
  flex:       1;
  min-width:  0;
  padding:    clamp(0.6rem, 2vw, 1rem);
  overflow:   hidden;
}

.post-title {
  overflow-wrap: break-word;
  word-break:    break-word;
  hyphens:       auto;
}

.post-title a {
  display:           -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

/* ==========================================================================
   10. HEADER — pinned, full-width, no overflow
   ========================================================================== */
.site-header {
  width:         100%;
  max-width:     100%;
  left:          0;
  right:         0;
  overflow:      visible;        /* allow dropdown menus to show */
  box-sizing:    border-box;
}

.header-container {
  width:           100%;
  max-width:       1440px;
  margin-inline:   auto;
  padding-inline:  clamp(0.75rem, 3vw, 1.5rem);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             0.5rem;
  flex-wrap:       nowrap;       /* keep header items in one row */
  min-width:       0;
}

/* Logo — shrinks on small screens instead of pushing content off */
.site-branding {
  flex-shrink: 1;
  min-width:   0;
  overflow:    hidden;
}

.site-logo {
  white-space:    nowrap;
  overflow:       hidden;
  text-overflow:  ellipsis;
  max-width:      clamp(100px, 35vw, 220px);
  display:        block;
}

/* Header actions — don't wrap; hide text labels on small screens */
.header-actions {
  flex-shrink: 0;
  display:     flex;
  align-items: center;
  gap:         clamp(0.2rem, 1vw, 0.5rem);
}

/* ==========================================================================
   11. CATEGORY TABS — horizontal scroll, no wrapping
   ========================================================================== */
.category-tabs {
  width:      100%;
  overflow-x: auto;
  overflow-y: visible;
}

.category-tabs-container {
  display:              flex;
  gap:                  0.25rem;
  padding:              0.5rem clamp(1rem, 4vw, 1.5rem);
  overflow-x:           auto;
  overflow-y:           visible;
  scrollbar-width:      none;
  -webkit-overflow-scrolling: touch;
  width:                max-content;  /* let it be as wide as content */
  min-width:            100%;         /* but at least full viewport */
}
.category-tabs-container::-webkit-scrollbar { display: none; }

.category-tab {
  flex-shrink: 0;          /* tabs never shrink/wrap */
  white-space: nowrap;
}

/* ==========================================================================
   12. ARCHIVE / SEARCH PAGE
   ========================================================================== */
.archive-header {
  width:    100%;
  max-width: 100%;
}

.archive-title {
  font-size:     clamp(1.5rem, 4vw, 2.25rem);
  overflow-wrap: break-word;
  word-break:    break-word;
  hyphens:       auto;
  max-width:     100%;
}

.archive-description {
  max-width: 100%;
  overflow-wrap: break-word;
}

/* ==========================================================================
   13. PAGE TEMPLATE (static pages) — full-width content
   ========================================================================== */
.page-template .single-post-content,
.page .single-post-content {
  max-width:     760px;
  margin-inline: auto;
  width:         100%;
}

/* WordPress page content blocks — override any Gutenberg default widths */
.entry-content,
.page-content {
  width:         100%;
  max-width:     100%;
  overflow-wrap: break-word;
  word-break:    break-word;
}

/* ==========================================================================
   14. TABLES — horizontal scroll on small screens (never overflow page)
   ========================================================================== */
.single-post-content table,
.entry-content table {
  width:     100%;
  max-width: 100%;
  display:   block;             /* enables overflow-x:auto on the element */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
/* Restore table display for wider screens */
@media (min-width: 640px) {
  .single-post-content table { display: table; overflow-x: visible; }
}

/* ==========================================================================
   15. EMBEDS (iframes, videos) — fluid aspect ratios
   ========================================================================== */
iframe,
embed,
object,
video {
  max-width:  100%;
  width:      100%;
  height:     auto;
}

/* 16:9 embed wrapper */
.wp-block-embed__wrapper,
.embed-responsive {
  position:       relative;
  width:          100%;
  padding-bottom: 56.25%;         /* 16:9 */
  height:         0;
  overflow:       hidden;
}
.wp-block-embed__wrapper iframe,
.embed-responsive iframe {
  position: absolute;
  top:      0; left: 0;
  width:    100%;
  height:   100%;
}

/* ==========================================================================
   16. CODE BLOCKS — scroll instead of overflow
   ========================================================================== */
pre,
code {
  overflow-x:    auto;
  white-space:   pre-wrap;           /* wrap long lines */
  word-break:    break-word;
  max-width:     100%;
}
pre {
  white-space: pre;                  /* code blocks use scroll not wrap */
  overflow-x:  auto;
  -webkit-overflow-scrolling: touch;
}
.single-post-content pre { max-width: 100%; }

/* ==========================================================================
   17. FORMS — all inputs full width, no overflow
   ========================================================================== */
input,
textarea,
select,
button {
  max-width: 100%;
  box-sizing: border-box;
}

.form-input,
.form-textarea,
.form-select,
.header-search-input,
.mobile-search-input,
.error-404-search-input {
  width:     100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   18. MODAL & OVERLAYS — safe viewport sizing
   ========================================================================== */
.share-modal,
.mobile-nav-panel {
  max-width: 100vw;
  max-height: 100dvh;
  overflow-y: auto;
}

.share-content {
  max-width: min(420px, calc(100vw - 2rem));
  width:     100%;
}

/* ==========================================================================
   19. TOAST — stays centred, never overflows
   ========================================================================== */
.toast-notification {
  max-width: calc(100vw - 2rem);
  text-align: center;
  white-space: normal;             /* allow wrapping on very narrow screens */
}

/* ==========================================================================
   20. AUTO-READ TOOLBAR — responsive
   ========================================================================== */
#ar-toolbar {
  width:      100%;
  max-width:  100%;
  box-sizing: border-box;
  overflow-x: auto;
}

/* ==========================================================================
   21. FOOTER
   ========================================================================== */
.site-footer,
#colophon {
  width:      100%;
  max-width:  100%;
  box-sizing: border-box;
  overflow:   hidden;
}

/* ==========================================================================
   22. MEDIA QUERIES — TABLET (641px – 959px)
   ========================================================================== */
@media (min-width: 641px) and (max-width: 959px) {

  .content-wrapper {
    padding: 1.5rem clamp(1rem, 3vw, 2rem);
  }

  .single-post-content {
    max-width: min(660px, 100%);
  }

  .single-post-title {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }

  /* 2-col grid on tablet */
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .header-container {
    padding-inline: 1.25rem;
  }
}

/* ==========================================================================
   23. MEDIA QUERIES — MOBILE LARGE (481px – 640px)
   ========================================================================== */
@media (max-width: 640px) {

  .content-wrapper {
    padding: 1rem;
  }

  .single-post-content {
    max-width:   100%;
    padding:     0;
    font-size:   1rem;
    line-height: 1.7;
  }

  .single-post-title {
    font-size: clamp(1.375rem, 5.5vw, 1.75rem);
    line-height: 1.25;
  }

  .single-post-meta {
    gap:        0.5rem 0.75rem;
    font-size:  0.75rem;
    flex-wrap:  wrap;
  }

  /* 2 columns on 480–640 */
  .posts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.625rem;
  }

  /* Prevent heading text from overflowing on mobile */
  h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    word-break:    break-word;
    hyphens:       auto;
    max-width:     100%;
  }

  /* Tighten card padding on small screens */
  .post-card .post-content {
    padding: 0.625rem;
  }

  .post-card .post-meta {
    gap: 0.25rem;
  }
}

/* ==========================================================================
   24. MEDIA QUERIES — MOBILE SMALL (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {

  html {
    font-size: 15px;             /* base slightly smaller on tiny screens */
  }

  .content-wrapper {
    padding: 0.875rem 0.75rem;
  }

  /* 1 column on tiny phones */
  .posts-grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .single-post-title {
    font-size: 1.375rem;
  }

  .single-post-content h2 { font-size: 1.2rem; }
  .single-post-content h3 { font-size: 1.1rem; }

  /* Stack the post meta items */
  .single-post-meta {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.4rem;
  }

  /* Full-width action buttons */
  .form-submit-btn,
  .load-more-btn {
    width:      100%;
    justify-content: center;
  }

  /* Share modal full-width on small phones */
  .share-content {
    border-radius: 16px 16px 0 0;
    max-width: 100%;
    width: 100%;
  }

  /* Category tabs — tighter */
  .category-tab {
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
  }

  /* 404 error number scales down */
  .error-404-code {
    font-size: clamp(4rem, 18vw, 7rem);
  }
}

/* ==========================================================================
   25. COLOUR CONTRAST FIXES
      Ensures body text meets WCAG AA (4.5:1) in both dark and light modes.
   ========================================================================== */

/* Dark mode defaults — already good; minor reinforcement */
body {
  color:      var(--tx-0, #ffffff);
  background: var(--bg-0, #000000);
}

/* Muted text — keep above 3:1 minimum for large text / UI */
.post-date,
.post-views,
.post-read-time,
.post-excerpt,
.archive-count {
  color: var(--tx-1, #c8c8c8);      /* 7:1 against #000 */
}

/* Link contrast in content */
.single-post-content a {
  color:           var(--clr-primary, #ff0050);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset:     2px;
}

/* Light mode contrast */
body.light-mode {
  color:      var(--tx-0, #0a0a0a);
  background: var(--bg-0, #f8f8f6);
}
body.light-mode .post-date,
body.light-mode .post-views,
body.light-mode .post-read-time {
  color: var(--tx-2, #777777);
}
body.light-mode .single-post-content {
  color: var(--tx-1, #3a3a3a);
}

/* ==========================================================================
   26. GUTENBERG BLOCK ALIGNMENT FIX
      WP Block editor sometimes outputs .alignfull / .alignwide that break
      out of the content wrapper and cause horizontal overflow.
   ========================================================================== */
.alignfull {
  width:       100vw;
  max-width:   100vw;
  margin-left: calc(-1 * clamp(1rem, 4vw, 2.5rem));
}
.alignwide {
  width:       100%;
  max-width:   100%;
}
/* Safety net: prevent ALL Gutenberg blocks from overflowing */
.wp-block {
  max-width: 100%;
}

/* ==========================================================================
   27. PRINT ADDITIONS
   ========================================================================== */
@media print {
  .content-wrapper { padding: 0; max-width: 100%; }
  .posts-grid      { grid-template-columns: 1fr; }
  body             { overflow: visible; }
}

/*
 * ──────────────────────────────────────────────────────────────────────────
 *  CONDENSED VERSION — paste into Appearance > Customize > Additional CSS
 *  (approx 60 lines; covers the essential fixes only)
 * ──────────────────────────────────────────────────────────────────────────
 *
 * *,*::before,*::after{box-sizing:border-box;max-width:100%}
 * html,body{overflow-x:hidden;width:100%}
 * .site{display:flex;flex-direction:column;min-height:100vh;width:100%;overflow-x:hidden}
 * .site-main{flex:1;width:100%;min-width:0;overflow-x:hidden}
 * .content-wrapper{width:100%;max-width:1440px;margin-inline:auto;padding:clamp(1rem,3vw,2rem) clamp(1rem,4vw,2.5rem);box-sizing:border-box}
 * .single-post-content{width:100%;max-width:700px;margin-inline:auto;overflow-wrap:break-word;word-break:break-word;hyphens:auto}
 * .single-post-content p{width:100%;max-width:100%;overflow-wrap:break-word}
 * .single-post-title{font-size:clamp(1.5rem,4.5vw,2.5rem);overflow-wrap:break-word;word-break:break-word;max-width:100%}
 * .post-thumbnail,.post-thumbnail img{width:100%;max-width:100%;height:auto}
 * .single-post-content img,.entry-content img{width:100%;max-width:100%;height:auto}
 * .posts-grid{display:grid;gap:clamp(.75rem,2vw,1rem);width:100%;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr))}
 * @media(max-width:480px){.posts-grid{grid-template-columns:1fr}.content-wrapper{padding:.875rem .75rem}.single-post-title{font-size:1.375rem}}
 * @media(max-width:640px){.single-post-content{max-width:100%;font-size:1rem}.single-post-meta{flex-wrap:wrap;font-size:.75rem}}
 * .site-header{width:100%;left:0;right:0;box-sizing:border-box}
 * .header-container{width:100%;max-width:1440px;margin-inline:auto;padding-inline:clamp(.75rem,3vw,1.5rem);display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;min-width:0}
 * h1,h2,h3,h4,h5,h6,p{overflow-wrap:break-word;word-break:break-word;max-width:100%}
 * pre,code{overflow-x:auto;max-width:100%}
 * iframe,embed,object,video{max-width:100%;width:100%}
 * input,textarea,select,button{max-width:100%;box-sizing:border-box}
 *
 * ──────────────────────────────────────────────────────────────────────────
 */