/* ==========================================================
   RCTX LOCAL NETWORK - CATEGORIES
   ========================================================== */

:root{
    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --bg:#f8fafc;
    --white:#fff;
    --text:#0f172a;
    --muted:#64748b;
    --border:#dbe4ef;
    --radius:22px;
    --shadow:0 12px 35px rgba(15,23,42,.06);
}

*,
*::before,
*::after{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

body.category-page{
    font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
}

/* ==========================================================
   HERO
   ========================================================== */

.cat-header{
    position:relative;
    overflow:hidden;
    text-align:center;
    padding:5rem 1.5rem 6rem;

    background:
    linear-gradient(-45deg,
    #0b1329,
    #1e3a8a,
    #2563eb,
    #0f766e);

    background-size:400% 400%;
    animation:heroGradient 16s ease infinite;
}

.cat-header::before{
    content:"";
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at 20% 20%,rgba(59,130,246,.28),transparent 35%),
    radial-gradient(circle at 80% 70%,rgba(15,118,110,.20),transparent 40%);
}

.cat-header>*{
    position:relative;
    z-index:2;
}

.cat-header h1{
    font-size:clamp(2.5rem,6vw,4.3rem);
    font-weight:800;
    color:#fff;
    line-height:1.1;
    margin-bottom:1rem;
}

.cat-header p{
    max-width:700px;
    margin:auto;
    color:#e2e8f0;
    font-size:1.2rem;
}

/* ==========================================================
   MAIN
   ========================================================== */

.cat-main{
    width:min(1200px,92%);
    margin:auto;
    padding:5rem 0;
}

/* ==========================================================
   SECTION TITLE
   ========================================================== */

.cat-grid-section h2{
    text-align:center;
    font-size:2.3rem;
    font-weight:800;
    margin-bottom:3rem;
    letter-spacing:-.02em;
}

/* ==========================================================
   GRID
   ========================================================== */

.cat-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(220px,1fr));

    gap:1.6rem;
}

/* ==========================================================
   CARD
   ========================================================== */

.cat-card{

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    text-align:center;
    text-decoration:none;

    min-height:190px;

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    color:var(--text);

    box-shadow:var(--shadow);

    transition:
    transform .3s,
    box-shadow .3s,
    border-color .3s;
}

.cat-card:hover{

    transform:translateY(-8px);

    border-color:var(--primary);

    box-shadow:
    0 22px 50px rgba(37,99,235,.16);
}

.cat-icon{

    font-size:3.2rem;

    margin-bottom:1rem;
}

.cat-name{

    font-size:1.08rem;

    font-weight:700;

    line-height:1.35;
}

/* ==========================================================
   INFO PANEL
   ========================================================== */

.cat-info{

    margin-top:5rem;

    background:#fff;

    border-radius:var(--radius);

    padding:3rem;

    text-align:center;

    border:1px solid var(--border);

    box-shadow:var(--shadow);
}

.cat-info p{

    font-size:1.05rem;

    color:var(--muted);

    margin-bottom:1rem;
}

.cat-info p:last-child{
    margin-bottom:0;
}

.cat-info a{

    color:var(--primary);

    font-weight:700;

    text-decoration:none;
}

.cat-info a:hover{
    text-decoration:underline;
}

/* Full-width container with slim padding */
.results-section {
    width: 100%;
    max-width: 100%;
    padding: 16px 24px;
    box-sizing: border-box;
}

/* Header styling */
#sectionTitle {
    font-size: 1.75rem;
    margin-bottom: 8px;
    color: #111827;
}

/* Metadata summary line */
#resultsMeta {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 20px;
}

/* Responsive results grid */
#resultsGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    width: 100%;
}

/* Centered pagination button */
#loadMoreBtn {
    display: block; /* Overridden by your inline style until needed */
    margin: 32px auto 0 auto;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    background-color: #2563eb;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    transition: background-color 0.2s;
}

#loadMoreBtn:hover {
    background-color: #1d4ed8;
}


/* Card Wrapper Link */
.biz-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16px;
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    text-decoration: none; /* Removes link underline */
    color: inherit; /* Inherits text color from parent */
    box-sizing: border-box;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Hover state for clickable card */
.biz-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

/* Header and Title Line */
.card-header h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1f2937;
}

/* Badges Base Style */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
}

.badge-verified {
    background-color: #dcfce7;
    color: #15803d;
}

.badge-claimed {
    background-color: #e0f2fe;
    color: #0369a1;
}

/* Description Text */
.card-description {
    font-size: 0.875rem;
    line-height: 1.5;
    color: #4b5563;
    margin: 0 0 16px 0;
    flex-grow: 1; /* Pushes footer elements to the bottom evenly */
}

/* Footer Section Group */
.card-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.815rem;
}

/* Services Tags Wrapper */
.card-services {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

/* Individual Tag Style */
.service-tag {
    background-color: #f3f4f6;
    color: #374151;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
    white-space: nowrap;
}

/* More Services Indicator */
.service-more {
    color: #6b7280;
    font-weight: 500;
    white-space: nowrap;
}

/* Town/Location Text */
.card-town {
    margin: 0;
    color: #6b7280;
    text-transform: capitalize;
    font-weight: 500;
    white-space: nowrap;
}

/* Drawer container */
.drawer {
  margin-bottom: 2rem;
}

/* Toggle button */
.drawer-toggle {
  display: none; /* hidden on /local/ */
  cursor: pointer;
  background: #0b0f19;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 0.95rem;
  user-select: none;
  justify-content: space-between;
  align-items: center;
}

.drawer-toggle .arrow {
  transition: transform 0.3s ease;
}

/* Drawer collapsed */
.drawer.collapsed .drawer-content {
  max-height: 140px; /* enough for 2 items */
  overflow: hidden;
}

.drawer.collapsed .drawer-toggle .arrow {
  transform: rotate(-90deg);
}

/* Mobile optimization */
@media (max-width: 640px) {
    .results-section {
        padding: 12px 16px;
    }
    #resultsGrid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}


/* ==========================================================
   ANIMATION
   ========================================================== */

@keyframes heroGradient{

    0%{
        background-position:0 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0 50%;
    }
}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:768px){

    .cat-header{

        padding:5.5rem 1.25rem 4.5rem;
    }

    .cat-header h1{

        font-size:2.6rem;
    }

    .cat-header p{

        font-size:1.05rem;
    }

    .cat-grid{

        grid-template-columns:
        repeat(2,1fr);

        gap:1rem;
    }

    .cat-card{

        min-height:165px;

        padding:1rem;
    }

    .cat-icon{

        font-size:2.5rem;
    }

    .cat-name{

        font-size:1rem;
    }

    .cat-grid-section h2{

        font-size:1.9rem;

        margin-bottom:2rem;
    }

    .cat-info{

        padding:2rem;
    }

  }