/*
Theme Name: BAS Site
Theme URI: https://bas.org.in/
Description: Child theme of Twenty Twenty-One for bas.org.in. It shows posts and pages with the BAS site navigation, footer, design tokens and article layout.
Author: Bangalore Astronomical Society
Template: twentytwentyone
Version: 0.1.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: bas-site
*/

/*
 * Load order (functions.php): Twenty Twenty-One, tokens.css, bas-site.css,
 * this file. Every design value comes from tokens.css through
 * var(--bas-...).
 *
 * The block editor loads tokens.css and this file into its canvas
 * (docs/style-system.md, ST-64). The article rules name both the front
 * end (.bas-site-chrome .entry-content) and the editor canvas
 * (.editor-styles-wrapper .is-root-container), so one rule styles both.
 * The editor also loads this file in the admin page around the canvas, so
 * rules here must not style bare elements of wp-admin.
 */

/* 1. Twenty Twenty-One custom properties, mapped to BAS tokens. The
   selector html:root (specificity 0,1,1) beats the :root rules of the
   Twenty Twenty-One editor stylesheet, which the editor prints after
   this file. TT1 properties that derive from these, such as
   --heading--font-family, then also resolve to BAS values. */

html:root {
  --global--font-primary: var(--bas-font-sans);
  --global--font-secondary: var(--bas-font-sans);
  --global--font-size-base: var(--bas-text-md);
  --global--font-size-xs: var(--bas-text-sm);
  --global--font-size-sm: var(--bas-text-md);
  --global--font-size-md: var(--bas-text-lg);
  --global--font-size-lg: var(--bas-text-xl);
  --global--font-size-xl: var(--bas-text-2xl);
  --global--font-size-xxl: var(--bas-text-3xl);
  --global--font-size-xxxl: var(--bas-text-4xl);
  --global--font-size-page-title: var(--bas-text-3xl);
  --global--line-height-body: var(--bas-leading-body);
  --global--line-height-heading: var(--bas-leading-tight);
  --global--line-height-page-title: var(--bas-leading-tight);

  --heading--font-size-h1: var(--bas-text-3xl);
  --heading--font-size-h2: var(--bas-text-2xl);
  --heading--font-size-h3: var(--bas-text-xl);
  --heading--font-size-h4: var(--bas-text-lg);
  --heading--font-size-h5: var(--bas-text-md);
  --heading--font-size-h6: var(--bas-text-sm);
  --heading--font-weight: var(--bas-weight-bold);
  --heading--font-weight-page-title: var(--bas-weight-bold);
  --heading--font-weight-strong: var(--bas-weight-bold);

  --global--color-primary: var(--bas-text);
  --global--color-secondary: var(--bas-heading);
  --global--color-primary-hover: var(--bas-link-hover);
  --global--color-background: var(--bas-bg);
  --global--color-border: var(--bas-rule);
  --wp--style--color--link: var(--bas-link);

  --global--spacing-unit: var(--bas-space-4);
  --global--spacing-horizontal: var(--bas-pad-page);
  --global--spacing-vertical: var(--bas-gap-flow);
  --global--elevation: var(--bas-shadow-card);

  --button--color-text: var(--bas-button-text);
  --button--color-text-hover: var(--bas-button-text);
  --button--color-text-active: var(--bas-button-text);
  --button--color-background: var(--bas-button-bg);
  --button--color-background-active: var(--bas-button-hover-bg);
  --button--font-size: var(--bas-text-md);
  --button--font-weight: var(--bas-weight-medium);
  --button--line-height: var(--bas-leading-tight);
  --button--border-width: 1px;
  --button--border-radius: var(--bas-radius-md);
  --button--padding-vertical: var(--bas-space-3);
  --button--padding-horizontal: var(--bas-control-px);

  --form--font-size: var(--bas-text-md);
  --form--color-text: var(--bas-control-text);
  --form--border-color: var(--bas-control-border);
  --form--border-width: 1px;
  --form--border-radius: var(--bas-radius-md);
  --form--label-weight: var(--bas-weight-semibold);

  --entry-header--color: var(--bas-heading);
  --entry-header--color-hover: var(--bas-link-hover);
  --entry-header--color-focus: var(--bas-link-hover);

  --pagination--color-text: var(--bas-muted);
  --pagination--color-link-hover: var(--bas-link-hover);
  --pagination--font-size: var(--bas-text-sm);

  --footer--color-text: var(--bas-muted);
  --footer--color-link: var(--bas-link);
  --footer--color-link-hover: var(--bas-link-hover);

  --quote--font-size: var(--bas-text-md);
  --pullquote--border-color: var(--bas-accent);
  --pullquote--color-foreground: var(--bas-text);
  --pullquote--color-background: var(--bas-bg);
  --separator--border-color: var(--bas-rule);

  --table--stripes-border-color: var(--bas-rule);
  --table--stripes-background-color: var(--bas-code-bg);
  --table--has-background-text-color: var(--bas-text);

  /* Text column (measure) and wide blocks such as the featured image. */
  --responsive--aligndefault-width: min(calc(100vw - 2 * var(--bas-pad-page)), var(--bas-measure));
  --responsive--alignwide-width: min(calc(100vw - 2 * var(--bas-pad-page)), var(--bas-width-text));
  --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
  --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
}

body:not(.wp-admin) {
  background-color: var(--bas-bg);
  color: var(--bas-text);
  font-family: var(--bas-font-sans);
  font-size: var(--bas-text-md);
  line-height: var(--bas-leading-body);
}

/* 2. Site chrome: the nav bar from bas-site.css, full width. */

.bas-site-header {
  margin: 0;
  max-width: none;
  padding: 0;
}

.bas-site-footer--wp {
  margin: var(--bas-gap-section) auto 0;
  max-width: var(--responsive--alignwide-width);
  padding: var(--bas-gap-group) 0 var(--bas-gap-page-end);
}

.bas-site-footer--wp p {
  margin: 0;
}

/* Twenty Twenty-One fills every <button> with a colour through
   high-specificity :not() chains. The nav toggle keeps its bas-site.css look. */
.bas-site-nav .bas-theme-toggle:not(:hover):not(:active):not(.has-background) {
  background-color: transparent;
  color: var(--bas-nav-text);
}

.bas-site-nav .bas-theme-toggle:hover,
.bas-site-nav .bas-theme-toggle:active {
  background-color: var(--bas-nav-control-hover-bg);
  border-color: var(--bas-accent);
  color: var(--bas-nav-text);
}

/* 3. Article layout: one centred text column; wide featured image. */

.bas-site-chrome .site-main {
  padding: var(--bas-space-6) 0 0;
}

.bas-site-chrome .site-main > * {
  margin-bottom: var(--bas-gap-section);
  margin-top: var(--bas-gap-section);
}

.bas-site-chrome .site-main > *:first-child {
  margin-top: 0;
}

.singular.bas-site-chrome .entry-header {
  border-bottom: 0;
  margin-bottom: var(--bas-gap-section);
  padding-bottom: 0;
}

.bas-site-chrome .entry-header .entry-title,
.bas-site-chrome .entry-header .bas-entry-meta {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--responsive--aligndefault-width);
}

:is(.bas-site-chrome .entry-title, .editor-styles-wrapper .editor-post-title) {
  color: var(--bas-heading);
  font-family: var(--bas-font-sans);
  font-size: var(--bas-text-2xl);
  font-weight: var(--bas-weight-bold);
  letter-spacing: 0;
  line-height: var(--bas-leading-tight);
  margin-bottom: var(--bas-space-2);
}

.bas-entry-meta {
  color: var(--bas-muted);
  font-size: var(--bas-text-sm);
  margin-bottom: var(--bas-gap-section);
  margin-top: 0;
}

.bas-site-chrome .post-thumbnail {
  margin: 0 auto;
  max-width: var(--responsive--aligndefault-width);
  text-align: left;
  width: auto;
}

.bas-site-chrome .post-thumbnail .wp-post-image {
  border-radius: var(--bas-radius-sm);
  height: auto;
  margin: 0;
  width: 100%;
}

.bas-site-chrome .post-thumbnail figcaption {
  color: var(--bas-muted);
  font-size: var(--bas-text-sm);
  line-height: var(--bas-leading-snug);
  margin: var(--bas-space-2) 0 0;
  text-align: left;
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) {
  color: var(--bas-text);
  font-family: var(--bas-font-sans);
  font-size: var(--bas-text-md);
  line-height: var(--bas-leading-body);
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) > * {
  margin-bottom: var(--bas-gap-flow);
  margin-top: var(--bas-gap-flow);
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) > *:first-child {
  margin-top: 0;
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) > :where(h2, h3, h4, h5, h6) {
  color: var(--bas-heading);
  font-family: var(--bas-font-sans);
  font-weight: var(--bas-weight-bold);
  letter-spacing: 0;
  line-height: var(--bas-leading-tight);
  margin-bottom: var(--bas-space-3);
  margin-top: var(--bas-gap-heading);
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) > h2 {
  border-bottom: 1px solid var(--bas-rule);
  font-size: var(--bas-text-2xl);
  padding-bottom: var(--bas-space-1);
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) > h3 {
  font-size: var(--bas-text-xl);
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) > h4 {
  font-size: var(--bas-text-lg);
}

:is(.bas-site-chrome :where(.entry-content, .entry-footer, .post-navigation, .bas-entry-meta), .editor-styles-wrapper :where(.is-root-container)) a {
  color: var(--bas-link);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

:is(.bas-site-chrome :where(.entry-content, .entry-footer, .post-navigation, .bas-entry-meta), .editor-styles-wrapper :where(.is-root-container)) a:hover,
:is(.bas-site-chrome :where(.entry-content, .entry-footer, .post-navigation, .bas-entry-meta), .editor-styles-wrapper :where(.is-root-container)) a:focus {
  color: var(--bas-link-hover);
  text-decoration-style: solid;
}

/* Figures and captions. */

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) > figure,
:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) > .wp-block-image {
  margin-bottom: var(--bas-gap-section);
  margin-top: var(--bas-gap-section);
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) .wp-block-image img {
  border-radius: var(--bas-radius-sm);
  display: block;
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) figcaption,
:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) .wp-element-caption {
  color: var(--bas-muted);
  font-size: var(--bas-text-sm);
  line-height: var(--bas-leading-snug);
  margin: var(--bas-space-2) 0 0;
  text-align: left;
}

/* Tables. */

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) .wp-block-table {
  overflow-x: auto;
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) .wp-block-table table {
  border-collapse: collapse;
  width: 100%;
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) .wp-block-table :where(th, td) {
  border: 0;
  border-bottom: 1px solid var(--bas-rule);
  font-size: var(--bas-text-md);
  line-height: var(--bas-leading-snug);
  padding: var(--bas-space-2) var(--bas-space-3);
  text-align: left;
  vertical-align: top;
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) .wp-block-table th {
  border-bottom: 2px solid var(--bas-control-border);
  color: var(--bas-heading);
  font-family: var(--bas-font-sans);
  font-weight: var(--bas-weight-semibold);
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) .wp-block-table thead {
  text-align: left;
}

:is(.bas-site-chrome .entry-content, .editor-styles-wrapper .is-root-container) :where(blockquote) {
  border-left: 4px solid var(--bas-accent);
  margin-left: 0;
  padding-left: var(--bas-pad-card);
}

/* Categories, tags and previous and next links. */

.bas-site-chrome .site-main > article > .entry-footer {
  align-items: flex-start;
  border-bottom: 0;
  border-top: 1px solid var(--bas-rule);
  color: var(--bas-muted);
  display: flex;
  flex-direction: column;
  font-size: var(--bas-text-sm);
  gap: var(--bas-gap-related);
  margin-top: var(--bas-gap-section);
  padding: var(--bas-gap-group) 0 0;
}

/* The edit link for users who can edit the post (ST-61): a small
   secondary control. It is a link, because it opens the editor. */

.bas-site-chrome .entry-footer .post-edit-link {
  align-items: center;
  background: var(--bas-button-secondary-bg);
  border: 1px solid var(--bas-button-secondary-border);
  border-radius: var(--bas-radius-md);
  color: var(--bas-button-secondary-text);
  display: inline-flex;
  font-size: var(--bas-text-sm);
  font-weight: var(--bas-weight-semibold);
  line-height: var(--bas-leading-tight);
  min-height: var(--bas-control-h-sm);
  padding: 0 var(--bas-control-px-sm);
  text-decoration: none;
}

.bas-site-chrome .entry-footer .post-edit-link:hover,
.bas-site-chrome .entry-footer .post-edit-link:focus {
  background: var(--bas-button-secondary-hover-bg);
  color: var(--bas-button-secondary-text);
  text-decoration: none;
}

.bas-site-chrome .entry-footer .post-edit-link:focus-visible {
  box-shadow: var(--bas-shadow-focus);
  outline: 2px solid var(--bas-focus-border);
  outline-offset: 2px;
}

.bas-site-chrome .post-navigation {
  font-size: var(--bas-text-sm);
  margin: var(--bas-gap-section) auto 0;
  max-width: var(--responsive--aligndefault-width);
}

.bas-site-chrome .post-navigation .meta-nav {
  color: var(--bas-muted);
  font-size: var(--bas-text-sm);
}

.bas-site-chrome .post-navigation .post-title {
  color: var(--bas-link);
  font-size: var(--bas-text-md);
  font-weight: var(--bas-weight-semibold);
  margin: 0;
}

.bas-site-chrome .post-navigation .svg-icon {
  fill: currentColor;
}

/* Comments: the BAS field and button recipe. */

.bas-site-chrome .comments-area {
  margin-left: auto;
  margin-right: auto;
  max-width: var(--responsive--aligndefault-width);
}

.bas-site-chrome :where(.comments-title, .comment-reply-title) {
  color: var(--bas-heading);
  font-family: var(--bas-font-sans);
  font-size: var(--bas-text-2xl);
  font-weight: var(--bas-weight-bold);
  line-height: var(--bas-leading-tight);
  margin: 0 0 var(--bas-space-3);
}

.bas-site-chrome :where(.comment-notes, .logged-in-as, .comment-form-cookies-consent) {
  color: var(--bas-muted);
  font-size: var(--bas-text-sm);
}

.bas-site-chrome .comment-form label {
  color: var(--bas-text);
  font-size: var(--bas-text-sm);
  font-weight: var(--bas-weight-semibold);
}

.bas-site-chrome .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  background: var(--bas-control-bg);
  border: 1px solid var(--bas-control-border);
  border-radius: var(--bas-radius-md);
  color: var(--bas-control-text);
  font-family: var(--bas-font-sans);
  font-size: var(--bas-text-md);
  min-height: var(--bas-control-h);
  padding: var(--bas-space-2) var(--bas-space-3);
}

.bas-site-chrome .comment-form :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus {
  border-color: var(--bas-focus-border);
  box-shadow: var(--bas-shadow-focus);
  outline: none;
}

.bas-site-chrome .comment-form input[type="checkbox"] {
  accent-color: var(--bas-link);
}

.bas-site-chrome .comment-form input[type="submit"] {
  background: var(--bas-button-bg);
  border: 1px solid var(--bas-button-border);
  border-radius: var(--bas-radius-md);
  color: var(--bas-button-text);
  cursor: pointer;
  font-family: var(--bas-font-sans);
  font-size: var(--bas-text-md);
  font-weight: var(--bas-weight-semibold);
  line-height: var(--bas-leading-tight);
  min-height: var(--bas-control-h);
  padding: 0 var(--bas-control-px);
}

.bas-site-chrome .comment-form input[type="submit"]:not(:hover):not(:active):not(.has-background) {
  background-color: var(--bas-button-bg);
  color: var(--bas-button-text);
}

.bas-site-chrome .comment-form input[type="submit"]:hover,
.bas-site-chrome .comment-form input[type="submit"]:active,
.bas-site-chrome .comment-form input[type="submit"]:focus {
  background: var(--bas-button-hover-bg);
  color: var(--bas-button-text);
  text-decoration: none;
}

.bas-site-chrome .comment-form input[type="submit"]:focus-visible {
  box-shadow: var(--bas-shadow-focus);
  outline: none;
}

/* Wide screens: a larger article title. */

@media (min-width: 641px) {
  :is(.bas-site-chrome .entry-title, .editor-styles-wrapper .editor-post-title) {
    font-size: var(--bas-text-3xl);
  }
}

@media (min-width: 822px) {
  :is(.bas-site-chrome .entry-title, .editor-styles-wrapper .editor-post-title) {
    font-size: var(--bas-text-4xl);
  }

  .bas-site-chrome .site-main {
    padding-top: var(--bas-space-7);
  }
}

/*
 * 4. The gallery page (WordPress page 38). Its content brings its own nav
 * bar, so the theme adds no chrome. These rules come from the former
 * Twenty Twenty-One "Additional CSS" of the live site.
 */

body.page-id-38 {
  background: var(--bas-bg);
  color: var(--bas-text);
  margin: 0;
  overflow-x: hidden;
}

body.page-id-38 #page,
body.page-id-38 .site,
body.page-id-38 .site-main,
body.page-id-38 article,
body.page-id-38 .entry-content {
  background: transparent;
  margin: 0;
  max-width: none;
  padding: 0;
}

body.page-id-38 .site-header,
body.page-id-38 .entry-header,
body.page-id-38 .widget-area,
body.page-id-38 .site-footer {
  display: none;
}

body.page-id-38 .entry-content > *,
body.page-id-38 .entry-content > .alignwide,
body.page-id-38 .entry-content > .alignfull {
  max-width: none;
}

body.page-id-38 .entry-content > .bas-gallery-wp {
  margin-top: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

body.page-id-38 .entry-content > .bas-gallery-wp > .bas-site-nav {
  max-width: none !important;
}

body.page-id-38 .bas-gallery-wp {
  background: var(--bas-bg);
  color: var(--bas-text);
  font-family: var(--bas-font-sans);
  font-size: var(--bas-text-xl);
  min-height: 100vh;
}

body.page-id-38 .bas-gallery-wp .bas-site-nav {
  font-size: var(--bas-text-md);
  width: 100%;
}

body.page-id-38 .entry-content > .bas-gallery-wp > .bas-page__main {
  margin: 0 auto;
  max-width: var(--bas-width-page) !important;
}

body.page-id-38 .bas-gallery-wp .bas-page__main > h1 {
  margin-top: 0;
}