/*
Theme Name: FootyMind Blog
Theme URI: https://www.footymind.com/blog/
Author: Beta Web Analysis Limited
Author URI: https://www.footymind.com/
Description: Minimal blog theme matching the main FootyMind brand — same typography, header, mobile menu, and light/dark mode as footymind.com. No comments, no author bylines, no extra navigation beyond a Home link back to the blog root.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: Unlicensed — private theme for FootyMind.
Text Domain: footymind-blog
*/

:root{
    color-scheme:light;
    --bg:#FFFFFF;
    --bg-panel:#FAFAF9;
    --bg-panel-2:#F3F3F2;
    --text:#181818;
    --text-dim:#71767C;
    --accent:#DC143C;
    --accent-soft:#F3C4CE;
    --line:#E7E6E4;
    --win:#2E7D4F;
    --loss:#DC143C;
  }
  [data-theme="dark"]{
    color-scheme:dark;
    --bg:#111318;
    --bg-panel:#181B21;
    --bg-panel-2:#20242B;
    --text:#F2F1EF;
    --text-dim:#9BA1A9;
    --accent:#FF4B68;
    --accent-soft:#5A2430;
    --line:#2B2F37;
    --win:#5FBE82;
    --loss:#FF4B68;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;position:relative;width:100%;overflow-x:hidden;}
  html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden;}
  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
    -webkit-tap-highlight-color:transparent;
    transition:background-color .2s ease, color .2s ease;
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto;}
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  }
  a:focus-visible,
  button:focus-visible,
  summary:focus-visible{
    outline:2px solid var(--accent);
    outline-offset:2px;
  }
  h1,h2,h3,.serif{
    font-family:'Fraunces',serif;
    font-weight:500;
    letter-spacing:-0.01em;
  }
  a{color:inherit;text-decoration:none;}
  ul{margin:0;padding:0;}
  .wrap{
    max-width:1080px;
    margin:0 auto;
    padding-left:40px;
    padding-right:40px;
  }

  /* ---------- preloader ---------- */
  .preloader{
    position:fixed;
    inset:0;
    z-index:200;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:var(--bg);
    transition:opacity .6s cubic-bezier(0.16,1,0.3,1), visibility .6s cubic-bezier(0.16,1,0.3,1);
  }
  .preloader-mark{
    font-family:'Fraunces',serif;
    font-size:26px;
    font-weight:600;
    color:var(--text);
    opacity:0;
    transform:translateY(8px);
    animation:preloaderMark .7s cubic-bezier(0.16,1,0.3,1) .1s forwards;
  }
  .preloader-mark span{color:var(--accent);}
  .preloader-line{
    margin-top:16px;
    width:0;
    height:2px;
    background:var(--accent);
    animation:preloaderLine .7s cubic-bezier(0.16,1,0.3,1) .55s forwards;
  }
  @keyframes preloaderMark{to{opacity:1;transform:translateY(0);}}
  @keyframes preloaderLine{to{width:56px;}}
  .preloader.is-done{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
  body.is-loading{overflow:hidden;}
  @media (prefers-reduced-motion:reduce){
    .preloader-mark,.preloader-line{animation:none;opacity:1;width:56px;}
  }

  /* ---------- header ---------- */
  header{
    border-bottom:1px solid var(--line);
    position:relative;
    z-index:50;
  }
  .header-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding-top:22px;
    padding-bottom:22px;
  }
  .wordmark{
    font-family:'Fraunces',serif;
    font-size:22px;
    font-weight:600;
    color:var(--text);
    flex-shrink:0;
  }
  .wordmark span{color:var(--accent);}
  .wordmark .o1,
  .wordmark .o2{
    display:inline-block;
    color:var(--accent);
    animation:oBounce 1.6s ease-in-out infinite;
  }
  .wordmark .o2{animation-delay:.32s;}
  .wordmark:hover .o1,
  .wordmark:hover .o2{animation-duration:.9s;}
  .wordmark .i-wrap{position:relative;display:inline-block;}
  .wordmark .i-dot{
    position:absolute;
    width:0.15em;
    height:0.15em;
    left:50%;
    top:-0.08em;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.65), transparent 60%), var(--accent);
    transform:translate(-50%,0);
    animation:iDotRoll 2.8s ease-in-out infinite .5s;
  }
  .wordmark:hover .i-dot{animation-duration:1.6s;}
  @keyframes iDotRoll{
    0%,15%{transform:translate(-50%,0) rotate(0deg);opacity:1;}
    35%{transform:translate(calc(-50% + 1em),0) rotate(260deg);opacity:1;}
    48%{transform:translate(calc(-50% + 1.6em),0) rotate(430deg);opacity:0;}
    58%{transform:translate(calc(-50% - 0.6em),0) rotate(430deg);opacity:0;}
    75%{transform:translate(calc(-50% - 0.25em),0) rotate(620deg);opacity:1;}
    100%{transform:translate(-50%,0) rotate(720deg);opacity:1;}
  }
  @keyframes oBounce{
    0%,100%{transform:translateY(0);}
    28%{transform:translateY(-4px);}
    46%{transform:translateY(0);}
    60%{transform:translateY(-1px);}
  }

  .menu-toggle{
    display:none;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:32px;
    height:28px;
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    z-index:60;
  }
  .menu-toggle span{
    display:block;
    width:100%;
    height:2px;
    background:var(--text);
    transition:transform .2s ease, opacity .2s ease;
  }
  .menu-toggle.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .menu-toggle.is-active span:nth-child(2){opacity:0;}
  .menu-toggle.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .header-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }
  .theme-toggle{
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:none;
    border:1px solid var(--line);
    color:var(--text);
    cursor:pointer;
    padding:0;
    transition:border-color .15s ease, color .15s ease;
  }
  .theme-toggle:hover{border-color:var(--accent);color:var(--accent);}
  .theme-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.6;}
  .theme-toggle .icon-moon{display:none;}
  [data-theme="dark"] .theme-toggle .icon-sun{display:none;}
  [data-theme="dark"] .theme-toggle .icon-moon{display:block;}

  .nav-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(15,15,15,.35);
    z-index:45;
  }
  .nav-backdrop.show{display:block;}

  .primary-nav{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex:1;
    margin-left:48px;
  }
  .nav-list{
    display:flex;
    gap:6px;
    list-style:none;
  }
  .nav-item{
    position:relative;
  }
  .nav-link{
    display:block;
    padding:10px 14px;
    font-size:14.5px;
    color:var(--text-dim);
    transition:color .15s ease;
  }
  .nav-item:hover .nav-link,
  .nav-item:focus-within .nav-link{color:var(--text);}
  .nav-caret{
    display:none;
  }
  .mega-panel{
    position:absolute;
    top:100%;
    left:0;
    background:var(--bg);
    border:1px solid var(--line);
    border-top:2px solid var(--accent);
    padding:8px 22px;
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:32px;
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav-item:hover .mega-panel,
  .nav-item:focus-within .mega-panel{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
  }
  .mega-panel li a{
    display:block;
    padding:11px 0;
    font-size:14px;
    color:var(--text-dim);
    border-top:1px solid var(--line);
    transition:color .15s ease;
    white-space:nowrap;
  }
  .mega-panel li:nth-child(1) a,
  .mega-panel li:nth-child(2) a{border-top:none;}
  .mega-panel li a:hover{color:var(--accent);}

  .nav-list-secondary{
    display:flex;
    gap:22px;
    list-style:none;
  }
  .nav-list-secondary a{
    font-size:13.5px;
    color:var(--text-dim);
  }
  .nav-list-secondary a:hover{color:var(--text);}

  /* ---------- intro ---------- */
  .intro{
    padding:40px 0 36px;
    border-bottom:1px solid var(--line);
  }
  .intro-lead{
    font-family:'Fraunces',serif;
    font-size:26px;
    line-height:1.3;
    letter-spacing:-0.01em;
    margin:0 0 10px;
    max-width:640px;
  }
  .intro-sub{
    font-size:15px;
    color:var(--text-dim);
    max-width:62ch;
    margin:0;
  }

  /* ---------- long-form content ---------- */
  .article-block{
    max-width:680px;
  }
  .article-block h2{
    font-size:26px;
    margin:0 0 18px;
  }
  .article-block + .article-block{
    margin-top:44px;
  }
  .article-block p{
    font-size:15px;
    color:var(--text-dim);
    margin:0 0 16px;
    max-width:70ch;
  }
  .article-block p:last-child{margin-bottom:0;}
  .article-block ul{
    font-size:15px;
    color:var(--text-dim);
    max-width:70ch;
    margin:0 0 16px;
    padding-left:20px;
  }
  .article-block ul li{margin-bottom:6px;}
  .article-block ul:last-child{margin-bottom:0;}

  /* ---------- faq ---------- */
  .faq-list{
    max-width:720px;
  }
  .faq-item{
    border-top:1px solid var(--line);
    padding:18px 0;
  }
  .faq-item:last-child{border-bottom:1px solid var(--line);}
  .faq-item summary{
    cursor:pointer;
    font-family:'Fraunces',serif;
    font-size:17px;
    color:var(--text);
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    transition:color .15s ease;
  }
  .faq-item summary:hover{color:var(--accent);}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-item summary::after{
    content:'+';
    font-family:'Inter',sans-serif;
    font-size:20px;
    color:var(--accent);
    flex-shrink:0;
    display:inline-block;
    transition:transform .3s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg);}
  .faq-item .faq-content{
    display:grid;
    grid-template-rows:0fr;
    overflow:hidden;
    transition:grid-template-rows .3s ease;
  }
  .faq-item[open] .faq-content{grid-template-rows:1fr;}
  .faq-item .faq-content > p{
    min-height:0;
    overflow:hidden;
    font-size:14.5px;
    color:var(--text-dim);
    max-width:66ch;
    margin:0;
    padding-top:14px;
  }

  /* ---------- scroll reveal ---------- */
  .reveal{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1);
  }
  .reveal.in-view{
    opacity:1;
    transform:translateY(0);
  }

  /* ---------- inner pages ---------- */
  .breadcrumb{
    font-size:13px;
    color:var(--text-dim);
    margin-bottom:14px;
  }
  .breadcrumb a:hover{color:var(--accent);}
  .page-title{
    font-size:34px;
    line-height:1.15;
    margin:0 0 14px;
    max-width:680px;
  }
  .page-lead{
    font-size:15.5px;
    color:var(--text-dim);
    max-width:65ch;
    margin:0;
  }
  .day-tabs{
    display:flex;
    gap:8px;
    margin-bottom:18px;
  }
  .day-tab{
    padding:9px 18px;
    font-size:13.5px;
    border:1px solid var(--line);
    background:none;
    color:var(--text-dim);
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease, background-color .15s ease;
  }
  .day-tab:hover{color:var(--text);}
  .day-tab.active{
    color:var(--text);
    border-color:var(--accent);
    background:var(--bg-panel);
  }
  .load-more-wrap{
    display:flex;
    justify-content:center;
    margin-top:22px;
  }
  .load-more-btn{
    padding:12px 30px;
    font-size:14px;
    border:1px solid var(--line);
    background:none;
    color:var(--text);
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
  }
  .load-more-btn:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
  .load-more-btn:disabled{opacity:.45;cursor:default;}

  .notice{
    font-size:12.5px;
    color:var(--text-dim);
    border-top:1px solid var(--line);
    padding-top:20px;
    max-width:70ch;
  }


  /* ---------- blog list ---------- */
  .blog-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:32px;
  }
  .blog-card{
    display:flex;
    flex-direction:column;
  }
  .blog-card-thumb{
    display:block;
    aspect-ratio:16/10;
    overflow:hidden;
    background:var(--bg-panel);
    margin-bottom:18px;
  }
  .blog-card-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .4s cubic-bezier(0.16,1,0.3,1);
  }
  .blog-card:hover .blog-card-thumb img{transform:scale(1.04);}
  .blog-card-date{
    font-size:12.5px;
    color:var(--text-dim);
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  .blog-card-title{
    font-size:21px;
    margin:8px 0 10px;
    line-height:1.3;
  }
  .blog-card-title a{transition:color .15s ease;}
  .blog-card-title a:hover{color:var(--accent);}
  .blog-card-excerpt{
    font-size:14.5px;
    color:var(--text-dim);
    margin:0 0 12px;
    max-width:60ch;
  }
  .blog-card-more{
    font-size:13.5px;
    font-weight:600;
    color:var(--accent);
    align-self:flex-start;
  }
  .blog-card-more:hover{color:var(--text);}

  /* ---------- single post ---------- */
  .single-thumb{
    margin-bottom:36px;
    background:var(--bg-panel);
  }
  .single-thumb img{
    width:100%;
    height:auto;
    display:block;
  }
  .article-block img{
    max-width:100%;
    height:auto;
    margin:12px 0;
  }
  .article-block a{
    color:var(--accent);
    text-decoration:underline;
    text-decoration-color:var(--accent-soft);
    text-underline-offset:3px;
    transition:color .15s ease, text-decoration-color .15s ease;
  }
  .article-block a:hover{
    color:var(--text);
    text-decoration-color:currentColor;
  }

  /* ---------- pagination (WordPress default markup) ---------- */
  .pagination{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:12px;
  }
  .pagination .page-numbers{
    padding:10px 16px;
    font-size:14px;
    border:1px solid var(--line);
    color:var(--text-dim);
    transition:border-color .15s ease, color .15s ease;
  }
  .pagination .page-numbers:hover{color:var(--text);border-color:var(--accent);}
  .pagination .page-numbers.current{
    color:var(--text);
    border-color:var(--accent);
  }
  .pagination .page-numbers.dots{border:none;}

  /* ---------- responsive ---------- */
  @media (max-width:1024px){
    header .wrap{padding-left:28px;padding-right:28px;}
    .header-row{padding-top:20px;padding-bottom:20px;}
    .menu-toggle{display:flex;}

    .primary-nav{
      position:fixed;
      top:0;
      right:0;
      bottom:0;
      height:100vh;
      height:100dvh;
      width:82%;
      max-width:320px;
      background-color:var(--bg);
      color:var(--text);
      border-left:1px solid var(--line);
      padding:96px 28px 32px;
      margin:0;
      transform:translateX(100%);
      transition:transform .25s ease;
      overflow-y:auto;
      flex-direction:column;
      align-items:stretch;
      display:flex;
      z-index:55;
    }
    .primary-nav.nav-open{transform:translateX(0);}

    .nav-list{
      flex-direction:column;
      gap:0;
      background-color:var(--bg);
    }
    .nav-item{
      border-bottom:1px solid var(--line);
      position:relative;
      background-color:var(--bg);
    }
    .nav-link{
      padding:16px 0;
      font-size:16px;
      color:var(--text) !important;
    }
    .nav-caret{
      display:block;
      position:absolute;
      right:0;
      top:4px;
      width:36px;
      height:36px;
      background:none;
      border:none;
      padding:0;
    }
    .nav-caret::before{
      content:'';
      display:block;
      width:8px;
      height:8px;
      border-right:1.5px solid var(--text-dim);
      border-bottom:1.5px solid var(--text-dim);
      transform:rotate(45deg);
      margin:12px auto;
      transition:transform .2s ease;
    }
    .nav-item.open .nav-caret::before{transform:rotate(-135deg);margin-top:16px;}
  }
  @media (max-width:400px){
    .wrap{padding-left:18px;padding-right:18px;}
  }
  @media (max-width:360px){
    header .wrap{padding-left:16px;padding-right:16px;}
  }
  @media (max-width:560px){
    /* Full-width body content on mobile, plus matching header/footer
       spacing for consistency. A small 10px gap keeps everything off
       the very edge of the screen. Defined after the 400px/360px
       breakpoints above, so it correctly takes priority at every width
       down to the smallest phones. */
    .intro .wrap,
    section.section .wrap,
    header .wrap,
    footer .wrap{
      padding-left:10px;
      padding-right:10px;
    }
  }
  @media (max-width:720px){
    .blog-list{grid-template-columns:1fr;}
  }