/* FreshWorksheets house-ad system styles. One look, four sizes, five accents.
   An ad slot is an <a class="houad" data-houad="SIZE"> filled by house-ads.js. */

.houad:empty{display:none!important}
.houad{display:flex;text-decoration:none;color:#1c2b3a;border-radius:14px;
  border:2px solid var(--ha-ac,#19784f);background:var(--ha-bg,linear-gradient(105deg,#eafaf0,#fff7e6));
  box-shadow:0 6px 18px rgba(20,40,34,.1);transition:transform .14s ease,box-shadow .14s ease;
  font-family:inherit;line-height:1.22;-webkit-font-smoothing:antialiased}
.houad:hover,.houad:focus-visible{transform:translateY(-2px);box-shadow:0 12px 28px rgba(20,40,34,.2)}

/* ---- accent themes ---- */
.houad[data-accent="ai"]   {--ha-ac:#6b4ee6;--ha-eye:#6b4ee6;--ha-btn:#6b4ee6;--ha-bg:linear-gradient(105deg,#f3f0ff,#fff7ea 68%,#eafaf0)}
.houad[data-accent="green"]{--ha-ac:#19784f;--ha-eye:#137749;--ha-btn:#137749;--ha-bg:linear-gradient(105deg,#eafaf0,#f3faef 60%,#fff7e6)}
.houad[data-accent="pink"] {--ha-ac:#e23e6d;--ha-eye:#e23e6d;--ha-btn:#e23e6d;--ha-bg:linear-gradient(105deg,#fff0f5,#fff7e8 70%,#eef4ff)}
.houad[data-accent="gold"] {--ha-ac:#d08a1c;--ha-eye:#a86a10;--ha-btn:#c8871b;--ha-bg:linear-gradient(105deg,#fff6df,#fffdf2 58%,#eafaf0)}
.houad[data-accent="blue"] {--ha-ac:#3a86ff;--ha-eye:#2f6fd0;--ha-btn:#2f6fd0;--ha-bg:linear-gradient(105deg,#eef4ff,#f4fbff 58%,#eafaf0)}

/* ---- shared pieces ---- */
.ha-eye{font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--ha-eye)}
.ha-ttl{font-weight:800;color:#1c2b3a}
.ha-sub{font-size:12.5px;color:#5b6472}
.ha-btn{display:inline-flex;align-items:center;gap:5px;background:var(--ha-btn);color:#fff;font-weight:900;white-space:nowrap;border-radius:10px}
.ha-copy{display:flex;flex-direction:column;min-width:0;gap:2px}
.ha-art{flex:0 0 auto;display:block;border-radius:7px;border:1px solid #e0d6cb;background:#fff;box-shadow:0 5px 12px rgba(20,40,34,.15);overflow:hidden}
.ha-art-svg{display:block;width:100%;height:100%}

/* ===== LEADERBOARD (horizontal) ===== */
.houad[data-size="leaderboard"]{flex-direction:row;align-items:center;gap:16px;padding:10px 18px;max-width:1200px;margin-left:auto;margin-right:auto}
.houad[data-size="leaderboard"] .ha-art{width:54px;height:68px}
.houad[data-size="leaderboard"] .ha-copy{flex:1}
.houad[data-size="leaderboard"] .ha-ttl{font-size:clamp(15px,1.7vw,19px)}
.houad[data-size="leaderboard"] .ha-btn{padding:10px 17px;font-size:14px}

/* ===== SKYSCRAPER (vertical) ===== */
.houad[data-size="skyscraper"]{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:16px 14px}
.houad[data-size="skyscraper"] .ha-copy{gap:5px;align-items:center}
.houad[data-size="skyscraper"] .ha-ttl{font-size:18px}
.houad[data-size="skyscraper"] .ha-art{width:66px;height:84px;margin:2px 0}
.houad[data-size="skyscraper"] .ha-btn{width:100%;justify-content:center;padding:11px;font-size:14px;margin-top:2px}

/* ===== RECT (medium rectangle / card) ===== */
.houad[data-size="rect"]{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 16px}
.houad[data-size="rect"] .ha-art{width:72px;height:92px;margin:2px 0}
.houad[data-size="rect"] .ha-ttl{font-size:19px;line-height:1.14}
.houad[data-size="rect"] .ha-btn{width:100%;justify-content:center;padding:12px;font-size:15px;margin-top:4px}

/* ===== MINI (small strip) ===== */
.houad[data-size="mini"]{flex-direction:row;align-items:center;gap:9px;padding:9px 12px;border-width:1.5px}
.houad[data-size="mini"] .ha-miniart{flex:0 0 auto;width:26px;height:33px;border-radius:5px;border:1px solid #e0d6cb;background:#fff;overflow:hidden;box-shadow:0 2px 6px rgba(20,40,34,.14)}
.houad[data-size="mini"] .ha-ttl{flex:1;min-width:0;font-size:13px;font-weight:800}
.houad[data-size="mini"] .ha-go{color:var(--ha-btn);font-weight:900;font-size:16px;flex:none}

/* Global: keep cross-promo strips/bars from touching the viewport edges when zoomed out */
.fw-xsite{max-width:1280px;margin-left:auto;margin-right:auto}
@media print{.houad{display:none!important}}
@media(max-width:560px){
  .houad[data-size="leaderboard"] .ha-art{display:none}
  .houad[data-size="leaderboard"] .ha-sub{display:none}
}