/*!
Theme Name: TCPCE — A Community of Learning
Theme URI: https://tcpce.ca/
Author: Sohan Alva for TCPCE
Author URI: https://tcpce.ca/
Description: Block child theme for the Toronto Centre for Psychotherapy and Counselling Education. Built on Twenty Twenty-Five with a custom design system tuned for clarity, low maintenance, and a non-technical editor experience.
Template: twentytwentyfive
Version: 0.1.1
Tested up to: 6.6
Requires at least: 6.6
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: tcpce
Tags: block-templates, education, full-site-editing, custom-colors, custom-logo
*/

/* ----------------------------------------------------------------
   TCPCE custom CSS

   Most styling lives in theme.json. This file is for:
   1. Layout utility classes used by templates / parts (so block
      markup stays attribute-light and passes WP block validation).
   2. State-based styles (hover, focus) theme.json can't fully express.
   3. Component overrides for block patterns.
   ---------------------------------------------------------------- */

/* ============================================================
   Layout utilities (used by templates and parts)
   ============================================================ */

.tcpce-header {
    padding: var(--wp--preset--spacing--3);
    border-bottom: 1px solid var(--wp--preset--color--rule);
    background-color: var(--wp--preset--color--paper);
}

.tcpce-footer {
    padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--3) var(--wp--preset--spacing--5);
    border-top: 1px solid var(--wp--preset--color--rule);
    background-color: var(--wp--preset--color--paper-2);
}

.tcpce-main {
    margin-top: var(--wp--preset--spacing--6);
    margin-bottom: var(--wp--preset--spacing--6);
}

.tcpce-main--tall {
    margin-top: var(--wp--preset--spacing--7);
    margin-bottom: var(--wp--preset--spacing--7);
}

.tcpce-archive-item {
    padding-bottom: var(--wp--preset--spacing--4);
    margin-bottom: var(--wp--preset--spacing--4);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}

/* ============================================================
   Login button (Login menu item gets class "nav-login")
   ============================================================ */

.wp-block-navigation .nav-login a,
.wp-block-navigation li.nav-login > a {
    background-color: var(--wp--preset--color--brand-green);
    color: var(--wp--preset--color--paper) !important;
    padding: 0.5rem 1.25rem;
    border-radius: 999px;
    font-weight: 500;
    transition: background-color 0.15s ease;
    text-decoration: none;
}
.wp-block-navigation .nav-login a:hover,
.wp-block-navigation .nav-login a:focus {
    background-color: var(--wp--preset--color--brand-orange);
    text-decoration: none;
}
.wp-block-navigation .nav-login a::after {
    content: " ↗";
    display: inline-block;
    margin-left: 0.25rem;
    font-size: 0.85em;
}

/* ============================================================
   Block style options (registered via functions.php)
   ============================================================ */

.is-style-section-band {
    background-color: var(--wp--preset--color--paper-2);
    padding-block: var(--wp--preset--spacing--7);
}

.is-style-hairline {
    border-top: 1px solid var(--wp--preset--color--rule);
    margin-block: var(--wp--preset--spacing--5);
}

.wp-block-group.is-style-faculty-card {
    border: 1px solid var(--wp--preset--color--rule);
    border-radius: 12px;
    padding: var(--wp--preset--spacing--4);
    background-color: var(--wp--preset--color--paper);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wp-block-group.is-style-faculty-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(27, 31, 35, 0.06);
}

.is-style-announcement-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background-color: var(--wp--preset--color--paper-2);
    color: var(--wp--preset--color--ink-2);
    border-radius: 999px;
    font-size: var(--wp--preset--font-size--small);
    margin-bottom: var(--wp--preset--spacing--2);
}

.wp-block-table.is-style-curriculum table {
    border-collapse: collapse;
    width: 100%;
}
.wp-block-table.is-style-curriculum th,
.wp-block-table.is-style-curriculum td {
    padding: 0.875rem 1rem;
    border: 1px solid var(--wp--preset--color--rule);
    text-align: left;
}
.wp-block-table.is-style-curriculum th {
    background-color: var(--wp--preset--color--paper-2);
    font-family: var(--wp--preset--font-family--heading);
    font-weight: 600;
    color: var(--wp--preset--color--ink);
}
.wp-block-table.is-style-curriculum td:first-child {
    font-weight: 500;
    width: 18ch;
}

.is-style-resource-group {
    padding-block: var(--wp--preset--spacing--4);
}
.is-style-resource-group h3 {
    margin-bottom: var(--wp--preset--spacing--2);
    color: var(--wp--preset--color--brand-green);
}
.is-style-resource-group ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.is-style-resource-group ul li {
    padding-block: var(--wp--preset--spacing--1);
    border-bottom: 1px solid var(--wp--preset--color--rule);
}
.is-style-resource-group ul li:last-child {
    border-bottom: none;
}
.is-style-resource-group ul li a {
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}

.is-style-page-hero {
    padding-block: var(--wp--preset--spacing--7);
    text-align: center;
}
.is-style-page-hero h1 {
    margin-bottom: var(--wp--preset--spacing--2);
}
.is-style-page-hero .hero-subtitle {
    color: var(--wp--preset--color--ink-2);
    font-size: var(--wp--preset--font-size--medium);
    max-width: 48ch;
    margin-inline: auto;
}

.is-style-cta-band {
    background: linear-gradient(135deg,
        var(--wp--preset--color--brand-green) 0%,
        #5a8c20 100%);
    color: var(--wp--preset--color--paper);
    padding: var(--wp--preset--spacing--6) var(--wp--preset--spacing--4);
    border-radius: 16px;
    text-align: center;
}
.is-style-cta-band h2,
.is-style-cta-band p {
    color: var(--wp--preset--color--paper);
}

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