/*
Theme Name: PhasersOut
Theme URI: https://phasersout.example
Author: Robert Di Marco Berardino
Author URI: https://phasersout.example
Description: Block-Theme (Full Site Editing) fuer das PhasersOut Tech-Magazin. Quicksand (Body) + Rubik Maps (Headlines), Akzentfarbe sandybrown, schwarze Sidebar/Footer. Jede Kategorie erhaelt automatisch eine eigene Artikeluebersicht.
Requires at least: 6.4
Tested up to: 6.5
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: phasers-out
Tags: blog, news, block-styles, full-site-editing, custom-colors, custom-menu
*/

/* ==========================================================================
   PhasersOut – ergaenzende Styles
   Farben, Schriften, Layout-Grundlagen liegen in theme.json (Single Source
   of Truth). Hier stehen nur Dinge, die sich ueber theme.json nicht sauber
   ausdruecken lassen: das Kategorie-Trennlinien-Element, die schwarze
   Sidebar und ein paar Hover-/Grid-Feinheiten.
   ========================================================================== */

/* --- Kopfzeile / Marke ---------------------------------------------------- */
/* Der Schriftzug "Phasers Out" ist fest im header.html hinterlegt (nicht der  */
/* WP-Seitentitel), damit Schreibweise und Untertitel immer stimmen. Der Link  */
/* fuehrt zur Startseite = Home-Button.                                        */
.site-header .brand {
  margin-right: 40px;
}
.site-header .brand-title {
  font-family: var(--wp--preset--font-family--body);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1;
  margin: 0;
}
.site-header .brand-title a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}
.site-header .brand-title a:hover {
  color: var(--wp--preset--color--accent);
}
.site-header .brand-sub {
  font-size: 0.7em;
  margin: 2px 0 0;
}

/* --- Kategorie-Ueberschrift mit durchlaufender Linie ---------------------- */
/* Original: <p>Tech</p> + .horizontal-rule                                   */
.category-hr {
  display: flex;
  align-items: center;
  gap: 15px;
  margin: 25px 0;
}
.category-hr .wp-block-query-title,
.category-hr .wp-block-heading {
  font-weight: 700;
  white-space: nowrap;
  margin: 0;
}
.category-hr .horizontal-rule {
  flex: 1 1 auto;
  height: 0;
  margin: 0;
  border: 0;
  border-bottom: 1px solid var(--wp--preset--color--contrast);
}

/* --- Artikel-Grid (new-stories-wrapper) ----------------------------------- */
.new-story .story-title {
  cursor: pointer;
  line-height: 1.2;
}

/* Nur Artikel-Headlines (Post-Titel) in Rubik Maps (Display); alles andere    */
/* bleibt Quicksand. Ueber das Stylesheet erzwungen, damit es auch dann greift,*/
/* wenn im Website-Editor gespeicherte Stile die theme.json-Zuordnung ueber-   */
/* schreiben.                                                                  */
.wp-block-post-title,
.wp-block-post-title a {
  font-family: var(--wp--preset--font-family--display);
}
.new-story .wp-block-post-featured-image img {
  width: 100%;
  min-height: 250px;
  object-fit: cover;
}
.new-story .wp-block-post-featured-image img:hover {
  opacity: 0.9;
}

/* --- Aufmacher (leading-story) -------------------------------------------- */
.leading-story .main-img img {
  width: 100%;
  height: auto;
}
.title-entry h1:hover {
  cursor: pointer;
  color: var(--wp--preset--color--accent);
}

/* --- Schwarze Sidebar ----------------------------------------------------- */
.sidebar {
  background-color: var(--wp--preset--color--contrast);
  color: #fff;
  padding: 20px 15px;
}
.sidebar h3,
.sidebar .wp-block-heading {
  color: var(--wp--preset--color--accent);
  font-size: 2.5em;
  font-weight: 900;
  margin-bottom: 30px;
}
.sidebar a { color: #fff; text-decoration: none; }
.sidebar a:hover { color: var(--wp--preset--color--accent); }
.sidebar .new-story-sidebar h4 { font-weight: 700; margin: 10px 0; }
.sidebar .new-story-sidebar p { font-size: 0.8em; }
.sidebar hr { border-color: #444; }
.sidebar .wp-block-search__input {
  border: 0;
  padding: 8px 10px;
  width: 100%;
}

/* --- Webdienste ----------------------------------------------------------- */
.web-service a { text-decoration: none; text-align: center; display: block; }
.web-service a:hover { color: var(--wp--preset--color--accent); }
.web-service img { width: 100%; height: auto; }

/* --- Buttons -------------------------------------------------------------- */
.more-btn .wp-block-button__link,
.wp-block-button.more-btn .wp-block-button__link {
  letter-spacing: 1.1px;
  border-radius: 0;
  transition: transform 0.15s ease;
}
.more-btn .wp-block-button__link:hover {
  color: var(--wp--preset--color--accent);
  transform: scale(1.05);
}

/* --- Fussbereich ---------------------------------------------------------- */
.site-footer { align-items: center; }
.site-footer .wp-block-navigation { justify-content: flex-end; }

/* --- Navigation-Hover ----------------------------------------------------- */
.main-nav a:hover { color: var(--wp--preset--color--accent); }

/* --- Zugaenglichkeit ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}