/*
 Theme Name:  CheerUp Child
 Template:    cheerup
 Description: Child theme for CheerUp. Safe place for customizations.
 Author:      Your Name
 Version:     1.0.0
*/


/* ===== Taste with Aron – Directory (global) ===== */
:root{
  --ta-green:#1a3b32;
  --ta-ph:#7f8a86;
  --ta-round:16px;
  --ta-search-h:66px;
  --ta-select-h:48px;
}

/* Base layout */
.ta-dir{max-width:1100px;margin:0 auto;padding:24px 16px; box-sizing:border-box;}
.ta-dir__title{font-size:36px;text-align:center;color:var(--ta-green);margin:10px 0 18px;}
img, video{max-width:100%;height:auto}

/* --- Search bar --- */
.ta-searchbar{max-width:1100px;margin:0 auto 14px;width:100%}
.ta-searchwrap{position:relative;display:flex;gap:10px;align-items:stretch}
.ta-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);width:20px;height:20px;fill:var(--ta-green);opacity:.9;pointer-events:none}
.ta-searchinput{
  flex:1;height:var(--ta-search-h);
  border:2px solid var(--ta-green);border-radius:var(--ta-round);
  padding:12px 16px 12px 52px;font-size:16px;color:var(--ta-green);
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.04);outline:0;
}
.ta-searchinput::placeholder{color:var(--ta-ph)}
.ta-searchbtn{
  height:var(--ta-search-h);padding:0 22px;border:0;cursor:pointer;
  background:var(--ta-green);color:#fff;border-radius:var(--ta-round);
  font-weight:600;letter-spacing:.02em;transition:filter .2s ease;
}
.ta-searchbtn:hover{filter:brightness(1.06)}

/* --- Filters (segment row) --- */
.ta-filterbar{max-width:1100px;margin:0 auto 6px;width:100%}
.ta-toolbar{display:grid;gap:12px;grid-template-columns:1fr;align-items:stretch}
.ta-filterlabel{color:var(--ta-green);font-weight:700;opacity:.85}

.ta-seg{
  display:grid;grid-template-columns:repeat(4, minmax(120px,1fr));
  gap:10px;align-items:stretch;
}
.ta-seg__btn{
  display:flex;align-items:center;justify-content:center;
  height:var(--ta-select-h);border:2px solid var(--ta-green);
  border-radius:var(--ta-round);background:#fff;color:var(--ta-green);
  font-weight:600;cursor:pointer;
  transition:background .15s,color .15s,box-shadow .15s,border-color .15s,border-style .15s;
}
.ta-seg__btn:hover{box-shadow:0 2px 8px rgba(0,0,0,.06)}
.ta-seg__btn.is-active{background:var(--ta-green);color:#fff;border-color:var(--ta-green);border-style:solid}
.ta-seg__btn--ghost{border-style:dashed}

/* --- Sort bar --- */
.ta-sortbar{
  max-width:1100px;margin:10px auto 26px;padding:0 2px;
  display:flex;gap:8px;align-items:center;justify-content:flex-end;width:100%;
}
.ta-sortbar__label{color:var(--ta-green);font-weight:600}
.ta-sortbar__select{
  height:38px;border:1px solid rgba(0,0,0,.15);
  border-radius:10px;padding:6px 10px;background:#fff;color:var(--ta-green);
}

/* --- Results / cards --- */
.ta-list{display:grid;grid-template-columns:repeat(12,1fr);gap:20px}
.ta-card{
  grid-column:span 12;display:grid;grid-template-columns:180px 1fr;gap:16px;
  background:#fff;border:1px solid #e8eceb;border-radius:12px;overflow:hidden;
  box-shadow:0 2px 10px rgba(0,0,0,.04)
}
.ta-card__thumb img{display:block;width:100%;height:100%;object-fit:cover}
.ta-card__body{padding:14px 16px}
.ta-card__title{margin:2px 0 6px;font-size:22px;line-height:1.25}
.ta-card__title a{color:var(--ta-green);text-decoration:none}
.ta-card__title a:hover{text-decoration:underline}
.ta-card__meta{color:#6b7a75;font-size:14px;display:flex;gap:8px;align-items:center}
.ta-dot{opacity:.6}
.ta-card__excerpt{margin:10px 0 12px;color:#2b3b37}
.ta-card__read{color:var(--ta-green);text-decoration:underline;font-weight:600}

/* Pagination */
.ta-pagination{margin:22px 0 10px;text-align:center}
.ta-pagination ul{list-style:none;padding:0;margin:0;display:inline-flex;gap:8px;flex-wrap:wrap}
.ta-pagination a,.ta-pagination span{
  display:inline-block;padding:8px 12px;border:1px solid #dfe7e5;border-radius:8px;color:var(--ta-green)
}
.ta-pagination .current{background:var(--ta-green);color:#fff;border-color:var(--ta-green)}

/* Empty state */
.ta-empty{text-align:center;color:#6b7a75;margin:30px 0}

/* ---------- Desktop enhancements ---------- */
@media (min-width:960px){
  .ta-toolbar{grid-template-columns:auto 1fr}
  .ta-filterlabel{align-self:center}
}

/* ---------- Tablet & down ---------- */
@media (max-width:920px){
  .ta-card{grid-template-columns:1fr}
  .ta-card__thumb{height:200px;overflow:hidden}
}

/* ---------- Mobile niceties ---------- */
@media (max-width:600px){
  .ta-searchwrap{flex-direction:column}
  .ta-searchbtn{width:100%}
  .ta-sortbar{justify-content:flex-start}
}

/* === Mobile fixes & polish (placed AFTER existing rules) === */
@media (max-width:768px){
  :root{
    --ta-search-h:58px;  /* slightly shorter controls on phones */
    --ta-select-h:44px;
  }

  /* container + title */
  .ta-dir{padding:18px 12px}
  .ta-dir__title{font-size:28px;margin:6px 0 12px}

  /* make wrappers truly fluid on mobile */
  .ta-searchbar,.ta-filterbar,.ta-sortbar{max-width:100%;width:100%}

  /* search: stack input + button, tighten gaps */
  .ta-searchwrap{flex-direction:column;gap:8px}
  .ta-searchinput{padding-left:48px} /* room for icon */
  .ta-searchbtn{width:100%}

  /* filter: label on its own row; pills in a compact grid */
  .ta-toolbar{grid-template-columns:1fr;gap:8px}
  .ta-filterlabel{font-size:14px;margin-bottom:2px}

  /* 2 columns of pills on phones; prevent overflow */
  .ta-seg{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ta-seg__btn{min-width:0;padding:0 12px;font-size:15px;height:var(--ta-select-h)}

  /* sort: left-align and make the select full width */
  .ta-sortbar{justify-content:flex-start;gap:6px;flex-wrap:wrap}
  .ta-sortbar__select{width:100%;max-width:none}

  /* results: single column card, image responsive height */
  .ta-list{gap:14px}
  .ta-card__body{padding:12px}
  .ta-card__title{font-size:20px}
  .ta-card__excerpt{font-size:15px}
  .ta-card__thumb{height:48vw;max-height:260px}
}

/* ultra-small devices: one pill per row */
@media (max-width:360px){
  .ta-seg{grid-template-columns:1fr}
}