/*
Theme Name: City Cat Shelter
Theme URI: https://citycatshelter.co.uk/
Author: City Cat Shelter
Description: Clean, modern charity theme for City Cat Shelter, Brighton. Includes cat listings (adopt / happily homed), fundraising causes with progress bars, and all service pages.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: city-cat-shelter
*/

html,body{margin:0;padding:0;background:#fdfcfd;color:#33313a;font-family:'Nunito Sans',sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;max-width:100%}
*{box-sizing:border-box}
a{color:#e51e79;text-decoration:none}
a:hover{color:#b81561}
img{max-width:100%}
/* Gentle hover lift for pill links/buttons (replaces the prototype style-hover) */
header a,section a,footer a{transition:filter .15s ease,transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease}

/* Logo keeps its aspect ratio (overrides the global img max-width). */
.ccs-logo{display:block;height:76px;width:auto;max-width:none;flex-shrink:0}
/* Mobile-only controls are hidden on desktop. */
.ccs-burger,.ccs-nav-close,.ccs-backdrop{display:none}

/* ---------------- Tablet (<=1024px): all grids to 2 columns ---------------- */
@media (max-width:1024px){
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:1.4fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"]{
    grid-template-columns:1fr 1fr !important;
  }
}

/* ---------------- Mobile (<=780px): all grids to 1 column ---------------- */
@media (max-width:780px){
  /* Header no longer sticks; it is too tall for small screens. */
  .ccs-header{position:static !important}

  .ccs-topbar{justify-content:center !important;gap:8px !important;padding:8px 14px !important}
  .ccs-logorow{padding:10px 16px !important;gap:12px !important}
  .ccs-logo{height:50px !important}
  .ccs-fb{font-size:0 !important;padding:11px 14px !important;gap:0 !important}
  .ccs-fb svg{width:22px !important;height:22px !important}
  .ccs-fb-text{display:none}

  /* Nav bar becomes a hamburger button. */
  .ccs-navbar{justify-content:flex-start !important;padding:8px 16px !important}
  .ccs-burger{
    display:inline-flex !important;align-items:center;gap:9px;
    color:#fff;font-weight:700;font-size:16px;cursor:pointer;
    font-family:'Quicksand',sans-serif;padding:6px 2px;
  }

  /* The menu itself slides in from the right. */
  .ccs-nav{
    position:fixed !important;top:0;right:0;bottom:0;
    width:82%;max-width:330px;
    flex-direction:column !important;align-items:stretch !important;
    justify-content:flex-start !important;gap:4px !important;flex-wrap:nowrap !important;
    background:#241f42;padding:70px 22px 28px !important;
    transform:translateX(105%);transition:transform .28s ease;
    z-index:120;overflow-y:auto;box-shadow:-12px 0 42px rgba(0,0,0,.4);
  }
  .ccs-nav a{font-size:17px !important;padding:13px 16px !important;border-radius:12px;display:block}
  .ccs-nav-close{
    display:block;position:absolute;top:14px;right:20px;
    color:#fff;font-size:34px;line-height:1;cursor:pointer;font-weight:400;
  }
  .ccs-backdrop{
    display:block;position:fixed;inset:0;background:rgba(18,14,36,.55);
    opacity:0;visibility:hidden;transition:opacity .28s ease;z-index:110;
  }
  .ccs-nav-toggle:checked ~ .ccs-navbar .ccs-nav{transform:translateX(0)}
  .ccs-nav-toggle:checked ~ .ccs-backdrop{opacity:1;visibility:visible}

  /* Every grid stacks into a single readable column. */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns:1.05fr 1fr"],
  [style*="grid-template-columns:1.1fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr"],
  [style*="grid-template-columns:260px 1fr"]{
    grid-template-columns:1fr !important;
  }

  /* Comfortable heading sizes on small screens. */
  h1{font-size:34px !important;line-height:1.12 !important}
  h2{font-size:26px !important}

  /* Button rows wrap instead of overflowing. */
  [style*="display:flex;gap:14px"],
  [style*="display:flex;gap:12px"]{flex-wrap:wrap !important}

  /* Hero images: drop the decorative blobs and let the photo flow full width
     under the text, at its natural aspect ratio (no squashing). */
  [style*="position:relative;height:360px"],
  [style*="position:relative;height:420px"]{height:auto !important;min-height:0 !important}
  [style*="position:relative;height:360px"] > div,
  [style*="position:relative;height:420px"] > div{display:none !important}
  [style*="position:relative;height:360px"] > img,
  [style*="position:relative;height:420px"] > img{
    position:static !important;width:100% !important;height:auto !important;
    max-height:none !important;border-radius:20px;object-fit:cover;
  }
}