/*
Theme Name: Cred.ly Showcase
Description: Personal badge-wallet page in the layout of a Credly profile. The page itself is built with Elementor and created on activation.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: cred-ly-showcase
*/

/* Fonts are bundled so visitors' browsers never contact Google or Adobe. */
@font-face { font-family: "Open Sans"; font-weight: 300 800; font-style: normal; font-display: swap;
  src: url("assets/fonts/OpenSans-Variable.woff2") format("woff2"); }
@font-face { font-family: "Grad"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("assets/fonts/PlayfairDisplay-Bold.woff2") format("woff2"); }

:root {
  --cl-teal: #005850;
  --cl-text: #2e2e2e;
  --cl-muted: #4e4e4e;
  --cl-card-border: #c4c4c4;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; background: #fff; color: var(--cl-text); font: 400 16px/1.5 "Open Sans", Arial, sans-serif; }
a { color: var(--cl-teal); }

/* ---- header ---- */
.cl-header { display: flex; align-items: center; gap: 24px; height: 88px; padding: 0 26px; background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.cl-header__logo img { display: block; width: 103px; height: auto; }
.cl-header__search { flex: 1; max-width: 560px; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 14px; border: 1px solid #8a8a8a; border-radius: 8px; color: #6b6b6b; font-size: 14px; text-decoration: none; }
.cl-header__search svg { width: 18px; height: 18px; fill: #4e4e4e; flex: none; }
.cl-header__actions { margin-left: auto; display: flex; gap: 16px; }
.cl-button { white-space: nowrap; display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border: 2px solid var(--cl-teal); border-radius: 4px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--cl-teal); background: #fff; }
.cl-button--solid { background: var(--cl-teal); color: #fff; border-radius: 3px; }

/* ---- profile hero ---- */
.elementor .cl-hero { padding-top: 60px; }
.elementor .cl-hero > .elementor-container { justify-content: center; align-items: center; }
.elementor .cl-hero .elementor-column { width: auto !important; flex: 0 0 auto; }
.elementor .cl-avatar img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; }
.elementor .cl-name .elementor-heading-title { margin: 0 0 0 20px; font: 700 32px/1.5 "Grad", "Playfair Display", Georgia, serif; color: var(--cl-text); }

/* ---- badge wallet ---- */
.elementor .cl-wallet > .elementor-container { max-width: 890px; margin-left: 59px; }
.elementor .cl-wallet-title .elementor-heading-title { margin: 60px 0 0; padding-bottom: 32px; font: 700 24px/1.5 "Open Sans", sans-serif; color: var(--cl-text); }
.elementor .cl-wallet-row .elementor-column-wrap, .elementor .cl-wallet-row .elementor-widget-wrap { padding: 0 8px 16px; }
.elementor .cl-card { height: 100%; border: 1px solid var(--cl-card-border); border-radius: 16px; background: #fff; padding: 24px 16px 20px; transition: border-color .15s; }
.elementor .cl-card:hover, .elementor .cl-card:focus-within { border-color: var(--cl-teal); }
.elementor .cl-card .elementor-image-box-wrapper { text-align: left; }
.elementor .cl-card .elementor-image-box-img { display: flex; justify-content: center; margin: 0 0 16px !important; text-align: center; width: 100% !important; }
.elementor .cl-card .elementor-image-box-img img { width: 128px; height: 128px; object-fit: contain; }
.elementor .cl-card .elementor-image-box-title { margin: 0; font: 600 14px/1.45 "Open Sans", sans-serif; color: var(--cl-text); }
.elementor .cl-card .elementor-image-box-description { margin: 0; font: 400 12px/1.4 "Open Sans", sans-serif; color: var(--cl-text); }
.elementor .cl-card .cl-date { display: inline-block; padding-top: 8px; }

/* ---- footer ---- */
.cl-footer { margin-top: 40px; padding: 24px 24px 32px; }
.cl-footer ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.cl-footer li { padding: 0 12px; }
.cl-footer a { font-size: 16px; text-decoration: none; }
.cl-footer a:hover { text-decoration: underline; }
.cl-footer__disclaimer { margin: 16px 12px 0; font-size: 12px; color: var(--cl-muted); }

@media (max-width: 767px) {
  .cl-header { padding: 0 12px; gap: 8px; }
  .cl-header__logo img { width: 80px; }
  .cl-header__actions { gap: 8px; }
  .cl-button { padding: 0 12px; height: 36px; font-size: 13px; }
  .cl-header__search { display: none; }
  .elementor .cl-hero .elementor-column { width: 100% !important; text-align: center; }
  .elementor .cl-name .elementor-heading-title { margin: 12px 0 0; text-align: center; font-size: 26px; }
  .elementor .cl-wallet > .elementor-container { margin-left: 0; padding: 0 16px; }
  .elementor .cl-card { margin-bottom: 8px; }
}