/*
Theme Name: WoSS MVP Child
Template: twentytwentyfive
Version: 1.0
*/

@import url("../twentytwentyfive/style.css");

/* ==================================================================
   Design Principles
   ==================================================================

   - Mobile First as the default  < 768
   - Tablet Screens next          > 768
   - Desktop Screens next         > 1080
   - Large Desktop screens last   > 1400

   /*--------------@media configuration standards--------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens.
  
    /* Tablet and larger
      @media (min-width: 768px) { 
          
      }

    /* Desktop (most important jump)
      @media (min-width: 1080px) { 
        
        
      }

    /* Large desktop – optional
      @media (min-width: 1400px) {
      
      }

    /* Ultra Large Screens
      @media (min-width: 1600px) {
            
      }

      @media (min-width: 1920px) {
        
      }

      @media (min-width: 2400px) {
        
      }
*/

/* ==================================================================
   Global Design
   ================================================================== */

   :root {
    --bg:              #1e1e1e;
    --panel:           #2a2a2a;
    --panel-featured:  #b99a3d1b;
    --featured-border: rgba(208, 165, 36, 0.237);
    --text-primary:    #ffffff;
    --text-secondary:  #b0b0b0;
    --accent:          #b99a3d;
    --section-bg:      #2a2a2a;
    --link:            #e6c567;   /* resting state – soft warm gold */
    --link-hover:      #d4af37;   /* slightly brighter on hover */
    --container-max: 1320px;
   }

/* ==================================================================
   Base Typography & Layout
   ================================================================== */

  html {
    font-size: 16px;                                /* = 1rem = 16px on mobile */
  }

  body {
    margin: 0;
    font: 1.125rem/1.6 "Oswald", sans-serif;        /* 18px mobile → 19–20px desktop / 1.6 line height for readability*/
    background-color: var(--bg);    
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 80px;                              /* For Hero section page load equalising */
  }

  p {
    margin: 1rem 0 1rem;
    font-size: 1rem;                                /* 16px mobile → 17–18px desktop */
    line-height: 1.65;
    color: var(--text-secondary);
  }  

  a {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
  }

  a:hover,
  a:focus {
    color: var(--link-hover);
    border-bottom-color: currentColor;
  }
  
  h1, h2, h3, h4, h5, h6 {
    margin: 1rem 0 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--accent);
    letter-spacing: 0.5px;
  }

  h1 { font-size: 3rem; letter-spacing: 1px; }          /* 48px mobile */
  h2 { font-size: 2.4rem; }
  h3 { font-size: 1.8rem; }
  h4 { font-size: 1.5rem; }
  h5 { font-size: 1.1rem; }

  .text-primary_override { color: var(--text-primary); }      /* Additional Override for primary */
  .text-secondary_override { color: var(--text-secondary); }  /* Additional Override for secondary */
  .text-accent_override { color: var(--accent); }             /* Additional Override for accent */
  .text-top_margin_override { margin: 0.5rem 0 1rem; }          /* Removes top margin for putting headers at top of panels */

  /* Small text – captions, footnotes */
    small, .text-sm {
      font-size: 0.875rem;                              /* 14px mobile */
      line-height: 1.5;
      color: var(--text-secondary);
    }
  
  /*--------------@media configuration for Containers, Header & Navigation-------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens. */

    @media (min-width: 768px)  { 
      h1 { font-size: 4.5rem; } 
      h2 { font-size: 3rem; }
      h3 { font-size: 2.1rem; }
      body { padding-top: 0; }                           /* Remove Mobile padding fix */
    }
    @media (min-width: 1080px) {
      html { font-size: 17px; }
      h1 { font-size: 5.5rem; }
      h2 { font-size: 3.5rem; }
      h3 { font-size: 2.4rem; }
      h4 { font-size: 1.7rem; }
      h5 { font-size: 1.3rem; }
    }
    @media (min-width: 1400px) {
      h1 { font-size: 6.5rem; }
      h2 { font-size: 4rem; }
    }
    @media (min-width: 1920px) {
      h1 { font-size: 7.5rem; }
      html { font-size: 18px; }
    }
 
/* ==================================================================
   Material Icon Styles
   ================================================================== */
    
    .material-symbols-outlined.accent {
      color: var(--accent);
      font-size: 80px;
      display: inline-flex;
      vertical-align: middle;
    }
  
    /* mobile */
    @media (max-width: 768px) {
      .material-symbols-outlined.accent { 
          font-size: 50px;
      }
    }

/* ==================================================================
   Responsive Images
   ================================================================== */
           
    .img-cover {
      width: 100%;
      height: 100%;
      object-fit: cover;                          /* fills container, crops edges if needed */
      object-position: center;                    /* keeps the important part centered */
      border-radius: inherit;                     /* inherits panel’s border-radius */
      display: block;
      border: 1px solid var(--featured-border);
    }
    
    .img-contain {
      width: 100%;
      height: 100%;
      object-fit: contain;                        /* shows full image, adds letterbox if needed */
      object-position: center;
      background: var(--section-bg);              /* fallback colour if image has transparency */
      border-radius: inherit;
      border: 1px solid var(--featured-border);
    }

    .img-max {
      width: 100%;           
      height: auto;                               /* natural height – never stretched */
      object-fit: contain;                        /* keeps full image visible */
      object-position: center;
      display: block;
      margin: 0 auto;                             /* perfect horizontal centering */
      border-radius: inherit;                     /* matches panel corners */
      border: 1px solid var(--featured-border);
    }    

    .panel img {
      width: 98%;
      margin: auto;
      display: flex;
    }

    @media (min-width: 768px)  { 
      .panel img { width: auto; }
    }

/* ==================================================================
   Icon Images
   ================================================================== */
   
   .icon-wrapper {
      display: flex;
      justify-content: center;     
      gap: 3rem;                                      /* space between icons */
      flex-wrap: wrap;             
      padding: 0;
    }
   
   .icon-rounded {
      width: 60px;                                    /* adjust size once here – I recommend 72–90px */
      height: 60px;
      border-radius: 1.2rem;                          /* nice rounded corners */
      border: 3px solid rgba(185, 154, 61, 0.25);   /* subtle gold border */
      overflow: hidden;                               /* cuts off any overflow */
      display: flex;
      align-items: center;
      justify-content: center;
      background: #2a2a2a;                          /* fallback if image fails */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);    /* subtle depth */
      transition: all 0.3s ease;
    }
    
    .icon-rounded img {
      width: 100%;
      height: 100%;
      object-fit: contain;                            /* keeps full logo visible, no stretch */
      object-position: center;
      display: block;
    }
    
    /* Hover effect – premium feel */
    .icon-rounded:hover {
      border-color: var(--accent);
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(185, 154, 61, 0.15);
    }

/* ==================================================================
   Quote Card - Panel Style
   ================================================================== */

    .quotes-grid {
      display: grid;
      gap: 1.2rem;
      grid-template-columns: 1fr;           /* mobile: 1 column */
    }

    .quote-card {
      background: var(--panel-featured);
      border: 1px solid var(--featured-border);
      border-radius: 1rem;
      padding: 1.8rem 1.2rem;
      position: relative;
      overflow: hidden;
      font-size: 1rem;
      line-height: 1.6;
      font-style: italic;
      color: var(--text-primary);
      text-align: center;
    }

    /* Big elegant opening quote removed on small screens */
    .quote-card::before {
      content: '“';
      position: absolute;
      top: -10px;
      left: 20px;
      font-family: Georgia, serif;
      font-size: 10rem;
      line-height: 1;
      color: var(--accent);
      opacity: 0.32;
    }

    /* Attribution */
    .quote-card cite {
      display: block;
      margin-top: 1.5rem;
      font-style: normal;
      font-weight: 600;
      color: var(--accent);
      font-size: 0.95rem;
    }

    /*--------------@media configuration for Containers, Header & Navigation-------------------

      Default style is for small mobile screens. Following @media tags change style
      depending on screen size, to scale site up for larger screens. */
      
      @media (min-width: 768px) {
        .quotes-grid {
          grid-template-columns: repeat(2, 1fr) !important;        /* ← change to repeat(3, 1fr) for 3 cols */
          gap: 2rem;
        }
        .quote-card {
          padding: 2rem 1.5rem;
        }
        
      }

/* ==================================================================
   Primary Block Elements
   ================================================================== */

  .container,
  .header-container,
  .hr-container { 
    max-width: var(--container-max);
    width: 100%; /* Full width on smaller screens */
    margin: 0 auto; /* Centers the container */
    padding: 0 1rem; /* Adds horizontal padding for mobile */
    box-sizing: border-box; /* Ensures padding doesn't affect width */  
  }

  .hr-line{
    width: 40%;
    border: 1px solid var(--accent);
    background-color: var(--accent);
    height: 2px;
    border-radius: 3rem;
    margin: 0 auto;
  }
  
/* ==================================================================
   Header & Navigation
   ================================================================== */
  
  header {
    position: fixed; /* Fixes the header to the top */
    top: 0; /* Aligns it to the top of the viewport */
    left: 0; /* Ensures it spans the full width */
    right: 0; /* Ensures it spans the full width */
    z-index: 100; /* Ensures it stays above other content */
    padding: 0.4rem 0;
    background-color: var(--panel);
    border-bottom: 1px solid var(--accent);
  }

  .header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .woss-capital-logo {
    height: 38px;            /* Keeps it compact in default mobile nav */
    width: auto;             /* Preserve aspect ratio */
    vertical-align: middle;  /* Align neatly with text baseline */
    display: inline-block;
    margin-top: 4px;
    margin-bottom: 4px;
    object-fit: contain;
  }

  .logo a:hover,
  .woss-capital-logo a:hover {
    opacity: 0.7;
    transition: opacity 0.4s ease;
  }

  nav {
    flex-shrink: 0; /* Prevent nav from shrinking */
  }

  /* Hamburger button */
    #menu-toggle {
      display: block;                                 /* show hamburger on mobile */
      font-size: 2.4rem;
      color: var(--accent);
      background: none;
      border: none;
      cursor: pointer;  
      order: 2;   
      flex-shrink: 0; 
      z-index: 1001;
      padding: 0.5rem;
    }
    
  /* Default nav layout (mobile) */
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: none;                                /* hidden by default on mobile */
      flex-direction: column;
      background: var(--panel);
      border-top: 1px solid var(--accent);
      width: 100vw;                                 /* full screen width */
      position: absolute;
      left: 50%;
      transform: translateX(-50%);                  /* perfectly centered */
      top: 100%;                                    /* directly below header */
    }
    
    nav ul.show { display: flex; }  
    nav ul li a {
      display: block;
      padding: 1rem;
      color: var(--text-secondary);
      text-decoration: none;
      font-size: 1.1rem;
      font-weight: 500;
      transition: all 0.3s;
      border-bottom: 0;                             /* here and hover below to over-ride style of standard links for nav bar */
    }    
    nav ul li a:hover { color: var(--accent); border-bottom: 0; }

  /*--------------@media configuration for Containers, Header & Navigation-------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens. */
  
    /* Tablet and larger */
      @media (min-width: 768px) { 
        .woss-capital-logo { height: 56px; }          /* Make logo larger on larger screen */        
      }

    /* Desktop (most important jump) */
      @media (min-width: 1080px) { 
        :root { --container-max: 1200px; }            /* Make containers wider */
        #menu-toggle { display: none; }               /* Dont display hamburger */
        nav ul { 
          display: flex !important;
          flex-direction: row;
          position: static;
          background: transparent;
          border-top: none;
          width: auto;
          transform: none;
          gap: 2.5rem;     
        }
        nav ul li { 
          padding: 0;
          position: relative;
        }
        nav ul li a {
          color: var(--text-secondary);
          font-size: 1.1rem; 
          display: inline-block;
          padding: 0.4rem 0; 
          text-decoration: none;
          transition: color .3s;
        }    
        nav ul li a:hover { color: var(--accent); }
        nav ul li a::after {
          content: '';
          position: absolute;
          bottom: -4px;                      /* underline below text */
          left: 0;
          width: 0;
          height: 3px;
          background: var(--accent);
          transition: width .3s ease;
        }
      
        nav ul li a:hover::after {
          width: 100%;
        }
      }

    /* Large desktop – optional */
      @media (min-width: 1400px) {
        :root { --container-max: 1320px; }            /* Make containers wider */   
        h1 { font-size: 4.5rem; } 
      }

    /* Ultra Large Screens */
      @media (min-width: 1600px) {
        :root { --container-max: 1440px; }            /* Make containers wider */        
      }

      @media (min-width: 1920px) {
        :root { --container-max: 1700px; }            /* Make containers wider */
      }

      @media (min-width: 2400px) {
        :root { --container-max: 2100px; }            /* Make containers wider */
      }

/* ==================================================================
   Footer
   ================================================================== */

  footer {
    text-align: center;
    padding: 1rem;
    color: var(--text-secondary);
    background-color: var(--panel);
  }  

/* ==================================================================
   Scrollbar Element Style
   ================================================================== */

  body::-webkit-scrollbar{
    background: var(--panel);
    width: 8px;
  }

  body::-webkit-scrollbar-thumb{
    background: var(--accent);
    border-radius: 5px;
  }

/* ==================================================================
   Hero section: Index Page
   ================================================================== */

  .hero {
    padding-top: 80px;                          /* ← Match to body padding above */
    min-height: calc(50dvh - 80px);             /* subtract the same amount */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    font-family: 'Raleway', sans-serif;
    overflow: hidden;
  }

  .logo-img { height: 110px; margin-bottom: 1rem; opacity: 0;}

  .headline {
    font-size: 1.3rem;
    color: var(--text-secondary);
    font-weight: 700;
    opacity: 0;
    position: relative;
    padding: 0 1rem;
  }

  #headline {
    position: relative;
    max-width: calc(var(--container-max) - 2rem);
    display: inline-block;  /* ensures pseudo-element positions correctly */
    --underline-width: 0%;  /* starts at 0 — GSAP will animate this */
  }
  
  #headline::after {
    content: '';
    position: absolute;
    bottom: -8px;            /* adjust distance below text as needed */
    left: 0;
    width: var(--underline-width, 0%);  /* binds to custom property */
    height: 3px;
    background: var(--accent);
    border-radius: 2px;
    transform-origin: left center;  /* smooth expand from left */
  }

  /*--------------@media configuration for Containers, Header & Navigation-------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens. */
  
    /* Tablet and larger */
      @media (min-width: 768px) { 
        .logo-img { height: 180px; margin-top: 8rem; }
        .headline { font-size: 2rem; }
        .hero { height: 30rem; padding-top: 0; }
        
      }

    /* Desktop (most important jump) */
      @media (min-width: 1080px) { 
        .logo-img { height: 240px; margin-top: 8rem; }
        .headline { font-size: 2.5rem; }        
      }

/* ==================================================================
   Panels
   ================================================================== 
   
   Various different panel layouts, all configured here as generally 
   as possible for reuse. Aim is not to have any single use layouts
   that become duplicated */

   .panels-section {
      padding: 1rem 0;                      /* Reduced for mobile */
      gap: 1rem;                            /* Reduced row spacing for mobile */
      display: flex;
      flex-direction: column;
    }

    .panels {
        display: flex;
        flex-direction: column;             /* Stack panels vertically on mobile */
        gap: 1rem;                          /* Reduced panel spacing for mobile */
    }

    .panel {
        width: 100%;                        /* Full width on mobile */
        background-color: var(--panel);     /* Different background */
        border-radius: 1rem;                /* Rounded corners */
        padding: 1.5rem;        
        box-sizing: border-box;
        text-align: left;
    }   
    
    .panel p {
      padding: 0 0 1rem;
    }

    .panel-featured {
      background-color: var(--panel-featured);
      border: 1px solid var(--featured-border);
    }

  /*--------------@media configuration for Panels--------------------------------

    Default style is for small mobile screens. Following @media tags change style
    depending on screen size, to scale site up for larger screens. */
  
  /* Tablet and larger */
    @media (min-width: 768px) {  
      .panels-section {
        padding: 2rem 2rem;
        gap: 2rem;                        /* More Space between rows */
      }
      
      .panels {
        flex-direction: row !important;
        justify-content: space-between;
        gap: 2rem;                        /* Space between panels */
        flex-wrap: wrap;
      }  
      
      .panel {
        width: auto;
        flex: 1;                            /* Equal width for all panels */       
      }   
      
      .panel_internal {
        display: flex;
        flex-direction: row;             /* Stack panels vertically on mobile*/
      }

      .panel_internal_left20 {
        flex: 0 0 20%; /* Fixed width, approximately 20% of the panel */
        padding-right: 1.5rem;
      }
      
      .panel_internal_right {
        flex: 1;                              /* Takes up the remaining space */
        text-align: left;
        border-left: 2px solid var(--accent); /* Left border to divide sections */
        padding-left: 1.5rem;
      }
     
    }      

/* ==================================================================
   SCROLL-IN ANIMATIONS – container-based (just add a class)
   ================================================================== */

    /* Base hidden state – all animations start from here */
    .scroll-animate {
      opacity: 0;
      transition: all 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
      will-change: transform, opacity;
    }
    
    /* Individual animation types – just add the class you want */
    .animate-fade-up     { transform: translateY(60px); }
    .animate-fade-down   { transform: translateY(-60px); }
    .animate-slide-left  { transform: translateX(-80px); }
    .animate-slide-right { transform: translateX(80px); }
    .animate-scale       { transform: scale(0.92); }
    
    /* When the element enters viewport → add .visible */
    .scroll-animate.visible {
      opacity: 1;
      transform: translateY(0) translateX(0) scale(1) !important;
    }

/* ==================================================================
   BLOG FEED – Mobile-first (your exact workflow)
   ================================================================== */
    
    .section-title {
      text-align: center;
      font-size: 2rem;
      color: var(--accent);
      margin-bottom: 0.5rem;
    }

    .section-subtitle {
      text-align: center;
      color: var(--text-secondary);
      font-size: 1rem;
      max-width: 90%;
      margin: 0 auto 2.5rem;
    }

    .posts-grid {
      display: grid;
      grid-template-columns: 1fr;           /* mobile: always 1 column */
      gap: 1.3rem;
      margin-bottom: 1rem;
    }

    .post-card {
      background: var(--panel);
      border-radius: 1rem;
      overflow: hidden;
      transition: transform 0.3s ease;
      text-decoration: none;
      color: inherit;
      display: block;
    }

    .post-card:hover {
      transform: translateY(-6px);
    }

    .post-image {
      width: 100%;
      height: 100px;                /* fixed height — you control it */
      overflow: hidden;
      border-radius: 1rem 1rem 0 0;
      background: var(--panel)
    }
    
    .post-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;            /* will crop perfectly */
      object-position: center;
      display: block;      
    }

    .post-content {
      padding: 1rem;
      border-top: 1px solid var(--accent);
    }

    .post-title {
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--text-primary);
      margin-bottom: 0.6rem;
      line-height: 1.35;
    }

    .post-date {
      font-size: 0.85rem;
      color: var(--text-secondary);
      margin-bottom: 0.8rem;
    }

    .post-excerpt {
      color: var(--text-secondary);
      font-size: 0.95rem;
      line-height: 1.6;
    }

    /* Tablet – scale up */
    @media (min-width: 768px) {
      .section-title { font-size: 2rem; }
      .section-subtitle { font-size: 1.1rem; max-width: 700px; margin-bottom: 3rem; }

      .posts-grid {
        grid-template-columns: repeat(3, 1fr);
      }

      .post-image { height: 100px; }
    }

    /* Desktop – final polish */
    @media (min-width: 1080px) {

      .section-title { font-size: 2.3rem; }
      .section-subtitle { font-size: 1.15rem; }

      .posts-grid {
        grid-template-columns: repeat(4, 1fr);
      }

      .post-image { height: 100px; }
    }

    /* ==================================================================
   BLOCKQUOTE FIX – Override WP core on mobile/desktop
   ================================================================== */

/* Reset WP default blockquote */
.wp-block-quote,
.entry-content blockquote {
  background: transparent !important;
  border-left: none !important;
  padding: 0 !important;
  margin: 1.5rem 2.5rem !important;
  font-style: italic !important;
  font-size: 1.15rem !important;
  line-height: 1.7 !important;
  color: var(--text-primary) !important;
  position: relative !important;
  text-align: center !important;
  quotes: none !important;
}

/* Hide WP's ugly quote mark and citation */
.wp-block-quote cite,
.entry-content blockquote cite {
  display: inline !important;
  font-style: normal !important;
  color: var(--accent) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  margin-top: 0.5rem !important;
  text-align: right !important;
  display: block !important;
}

/* Gold accent bar under quote */
.wp-block-quote::before,
.entry-content blockquote::before {
  content: '';
  display: block;
  width: 90px;
  height: 3px;
  background: var(--accent);
  margin: 1rem auto 0;
  border-radius: 3px;
  opacity: 0.8;
}

/* Mobile – tighter spacing */
@media (max-width: 767px) {
  .wp-block-quote,
  .entry-content blockquote {
    font-size: 1.05rem !important;
  }
  .wp-block-quote cite,
  .entry-content blockquote cite {
    font-size: 0.95rem !important;
    text-align: center !important;
  }
}

/* Desktop – elegant spacing */
@media (min-width: 768px) {
  .wp-block-quote,
  .entry-content blockquote {
    font-size: 1.2rem !important;
  }
  .wp-block-quote cite,
  .entry-content blockquote cite {
    font-size: 1rem !important;
    text-align: right !important;
  }
}

/* ==================================================================
   BLOG LIST – Force 3 columns on desktop, 1 on mobile
   ================================================================== */

/* Default = mobile → 1 column */
.panels {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Tablet → 2 columns */
@media (min-width: 768px) {
  .panels {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Desktop → 3 columns (this is the one you need) */
@media (min-width: 1080px) {
  .panels {
    grid-template-columns: repeat(3, 1fr) !important;   /* ← 3 columns */
  }
}