/*
Theme Name: Keystone
Theme URI: https://themes.socialpointsmedia.com/templates/keystone/
Author: Social Points Media
Author URI: https://socialpointsmedia.com
Description: A multipurpose block theme for consultancies, professional services and corporate sites. A self-hosted display serif, calm spacing, and every page type you need already built.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keystone
Tags: block-patterns, full-site-editing, block-styles, wide-blocks, accessibility-ready, custom-colors, custom-logo, custom-menu, editor-style, featured-images, one-column, two-columns, threaded-comments, translation-ready

Keystone is a block theme by Social Points Media. All design values live in
theme.json; this file exists for the header above and for the handful of rules
that theme.json cannot express.
*/

/* --------------------------------------------------------------------------
   theme.json handles colour, type, spacing and layout. Only put things here
   that genuinely cannot be expressed there.
   -------------------------------------------------------------------------- */

/* Nothing should scroll sideways. `clip` rather than `hidden`, so the root
   does not become a scroll container and break sticky headers. */
html {
  overflow-x: clip;
}

/* Keyboard focus must always be visible. WordPress core sets a focus style on
   some elements and not others; this makes it consistent. */
:focus-visible {
  outline: 2px solid var(--wp--preset--color--primary);
  outline-offset: 2px;
}

/* Skip link styling for the block theme's generated skip link. */
.skip-link.screen-reader-text:focus {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--primary);
  z-index: 100000;
}

/* Balance headline wrapping, which theme.json has no property for. */
h1, h2, h3,
.wp-block-post-title,
.wp-block-site-title {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Block styles.

   Registered in functions.php so they appear in the editor's style picker;
   the visual definition lives here. All values come from theme.json presets,
   so re-skinning in Styles carries through to these automatically.
   -------------------------------------------------------------------------- */

/* Card — the surface used for features, pricing and post cards. */
.wp-block-group.is-style-card {
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 0.75rem;
}

/* Section — a full-width band with a quieter background. */
.wp-block-group.is-style-section {
  background-color: var(--wp--preset--color--base-2);
}

/* Surface button — the quiet secondary action. */
.wp-block-button.is-style-surface > .wp-block-button__link {
  background-color: var(--wp--preset--color--base);
  color: var(--wp--preset--color--contrast);
  border: 1px solid var(--wp--preset--color--border);
}

.wp-block-button.is-style-surface > .wp-block-button__link:hover,
.wp-block-button.is-style-surface > .wp-block-button__link:focus {
  background-color: var(--wp--preset--color--base-2);
  border-color: var(--wp--preset--color--contrast-3);
  color: var(--wp--preset--color--contrast);
}

/* Rounded image. */
.wp-block-image.is-style-rounded-lg img {
  border-radius: 0.5rem;
}

/* Plain — a list with the bullet and the indent taken off. Footers use it for
   their link columns, where a bullet reads as a typo rather than as a list. */
.wp-block-list.is-style-plain {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-plain a {
  text-decoration: none;
}

.wp-block-list.is-style-plain a:hover,
.wp-block-list.is-style-plain a:focus-visible {
  text-decoration: underline;
}

/* Checklist — a tick in place of the bullet, drawn as a background image so
   no icon font or extra markup is needed. The tick is decorative; the list
   still reads correctly to a screen reader. */
.wp-block-list.is-style-checks {
  list-style: none;
  padding-left: 0;
}

.wp-block-list.is-style-checks li {
  position: relative;
  padding-left: 1.75rem;
}

.wp-block-list.is-style-checks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--wp--preset--color--success);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.4 17.1 4 11.7'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6.5L9.4 17.1 4 11.7'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

/* The details block's marker, styled to match the rest of the theme. */
.wp-block-details summary {
  cursor: pointer;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.wp-block-details summary::-webkit-details-marker {
  display: none;
}

.wp-block-details summary::after {
  content: '';
  flex: 0 0 auto;
  width: 1.125rem;
  height: 1.125rem;
  background-color: var(--wp--preset--color--contrast-3);
  transition: transform 180ms ease;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.wp-block-details[open] summary::after {
  transform: rotate(45deg);
}

/* Respect a reduced-motion preference across every animation in the theme. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}