/*
Theme Name: System Hyperlink
Theme URI: https://systemhyperlink.com
Author: thexavismith
Author URI: https://systemhyperlink.com
Description: Custom block theme for systemhyperlink.com — a membership & newsletter publication built on WordPress + Paid Memberships Pro. Brand tokens (Platypi / Ysabeau Office, accent #6d28d9, dark #11121a) live in theme.json so the site's design is version-controlled and update-safe.
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: systemhyperlink
*/

/*
 * This is a block theme — almost all styling lives in theme.json.
 * Add only the rare overrides that theme.json can't express here.
 */

/* ── Heading links ───────────────────────────────────────────────────────────
 * Body links: underline by default, none on hover (set in theme.json).
 * Heading links reverse that — no underline by default, underline on hover.
 */
h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a,
.wp-block-post-title a,
.wp-block-site-title a,
.wp-block-query-title a {
  text-decoration: none;
}

h1 a:hover,
h2 a:hover,
h3 a:hover,
h4 a:hover,
h5 a:hover,
h6 a:hover,
.wp-block-post-title a:hover,
.wp-block-site-title a:hover,
.wp-block-query-title a:hover {
  text-decoration: underline;
}

/* ── Single post: tag pills ──────────────────────────────────────────────────
 * Renders post tags as borderless linked pills without comma separators.
 */
.shl-tag-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.shl-tag-pills .wp-block-post-terms__separator {
  display: none;
}

.shl-tag-pills a {
  display: inline-block;
  padding: 0.25rem 0.9rem;
  background-color: transparent;
  border: 1px solid #c8c7c0;
  border-radius: 100px;
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
  font-size: 0.85rem;
  line-height: 1.6;
}

.shl-tag-pills a:hover {
  border-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--accent);
}

/* ── Newsletter signup form ─────────────────────────────────────────────────
 * A simple, flexible "bare" form block pattern.
 * The form's background color is set by a modifier class, and the email input and submit button are styled to match.
 */

.sms-bare-form {
  --form-bg: var(--wp--preset--color--surface);
  --form-border: var(--wp--preset--color--contrast);
  border: 1px solid var(--form-border);
  box-shadow: 5px 5px 0 var(--form-border);
  background-color: var(--form-bg);
  display: flex;
  align-items: center;
  border-radius: 0;
  padding: 6px 6px 6px 20px;
  gap: 8px;
  font-family: inherit;
  max-width: 600px;
}

.sms-bare-form--dark {
  background-color: #1e1f2b;
}
.sms-bare-form__email {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: inherit;
  min-width: 0;
}
.sms-bare-form--light .sms-bare-form__email {
  color: #11121a;
}
.sms-bare-form--light .sms-bare-form__email::placeholder {
  color: var(--wp--preset--color--contrast);
}
.sms-bare-form--dark .sms-bare-form__email {
  color: #fff;
}
.sms-bare-form--dark .sms-bare-form__email::placeholder {
  color: #6b7280;
}
.sms-bare-form__submit {
  flex-shrink: 0;
  border: none;
  background-color: var(--wp--preset--color--accent);
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  padding: 10px 22px;
  cursor: pointer;
  white-space: nowrap;
}
.sms-bare-form__submit:hover {
  background-color: #5b21b6;
}

/* ── Members-only comment CTA ───────────────────────────────────────────────
 * Shown in place of the comment form for non-members.
 */
.shl-comment-cta {
  padding: 1.5rem;
  border: 1px solid var(--wp--preset--color--contrast);
  box-shadow: 5px 5px 0 var(--wp--preset--color--contrast);
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--30);
}

.shl-comment-cta h2 {
  font-size: var(--wp--preset--font-size--large);
  margin-top: 0;
  margin-bottom: var(--wp--preset--spacing--20);
  line-height: 1;
}

.shl-comment-cta p {
  margin: 0;
  line-height: 1.3;
}

.shl-comment-cta__content {
  /* margin-bottom:; */
}

.shl-comment-cta__link {
  flex-shrink: 0;
  display: inline-block;
  background-color: var(--wp--preset--color--accent);
  color: #fff;
  font-weight: 600;
  padding: 10px 22px;
  text-decoration: none;
  white-space: nowrap;
}

.shl-comment-cta__link:hover {
  background-color: #5b21b6;
  color: #fff;
}

/* ── AddToAny share buttons (on single post) ───────────────────────────────
 * The plugin doesn't add any classes to the buttons by default, so we wrap them in a container and style that.
 */

.wp-theme-systemhyperlink .addtoany_list {
  display: flex;
  gap: 12px;
}

.wp-theme-systemhyperlink .addtoany_list a {
  border: 1px solid #c8c7c0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  padding: 0.4rem;
}

.wp-theme-systemhyperlink.addtoany_list svg,
.wp-theme-systemhyperlink .addtoany_list path {
  fill: var(--wp--preset--color--contrast);
}

.wp-theme-systemhyperlink .addtoany_list a:hover {
  border: 1px solid var(--wp--preset--color--accent);
}

.wp-theme-systemhyperlink .addtoany_list a:hover span {
  opacity: 1;
}

.wp-theme-systemhyperlink .addtoany_list a:hover svg,
.wp-theme-systemhyperlink .addtoany_list a:hover path {
  fill: var(--wp--preset--color--accent);
}