/* Theme Name: Craftsmen 717 Theme URI: https://craftsmen717.com/ Author: Craftsmen Lodge 717 Author URI: https://craftsmen717.com/ Description: Vanilla block-theme child of Twenty Twenty-Five for Craftsmen Lodge 717. All design tokens live in theme.json; layout is edited live in the Site Editor. Template: twentytwentyfive Version: 0.1.0 Requires at least: 6.7 Requires PHP: 7.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: craftsmen717 Tags: full-site-editing, block-styles, block-patterns, wide-blocks, accessibility-ready */ /* Reserved for one-off CSS tweaks that don't belong in theme.json. Try to keep this file nearly empty — everything visual should be expressible as design tokens (theme.json) or block styles edited in the Site Editor. */ /* Semantic page canvas (tokens: assets/tokens/semantic.css) */ body { background-color: var(--page-background); color: var(--text-color-default); } /* Block buttons: action.color (jachin-blue-900 fill, 100 label) */ .wp-block-button__link { background-color: var(--action-color-background); color: var(--action-color-foreground); } .wp-block-button__link:hover, .wp-block-button__link:focus-visible { background-color: var(--action-color-background-hover); color: var(--action-color-foreground); } /* Content links: action.color link (jachin-blue-800) */ .wp-site-blocks a:not(.wp-block-button__link):not(.wp-block-navigation-item__content), .entry-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content) { color: var(--action-color-link); } .wp-site-blocks a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover, .entry-content a:not(.wp-block-button__link):not(.wp-block-navigation-item__content):hover { color: var(--action-color-link-hover); text-decoration: underline; } /* * Navigation: core sets .wp-block-navigation-item__content { color: inherit } and * forces inherit in the mobile overlay — set color on the block + item content. */ .wp-block-navigation { color: var(--action-color-link); } .wp-block-navigation .wp-block-navigation-item__content, .wp-block-navigation .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item__content:focus-visible { color: var(--action-color-link); text-decoration: underline; } .wp-block-navigation .wp-block-navigation-item__content:hover, .wp-block-navigation .wp-block-navigation-item__content:focus-visible { color: var(--action-color-link-hover); } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { color: var(--action-color-link) !important; } .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover, .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible { color: var(--action-color-link-hover) !important; } /* Minimum touch targets (WCAG 2.5.5) */ .wp-block-accordion-heading__toggle { min-height: 44px; min-width: 44px; } /* * Mobile overlay nav (core breakpoint: 600px): text "Menu" / "Close" instead of * hamburger/X icons, with a large fat-finger tap area (48px+). */ @media (max-width: 599px) { .wp-block-navigation__responsive-container-open svg, .wp-block-navigation__responsive-container-close svg { display: none; } .wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { align-items: center; background: var(--action-color-background); border: 1px solid var(--action-color-foreground); color: var(--action-color-foreground); border-radius: 4px; box-sizing: border-box; display: inline-flex; font-size: 1rem; font-weight: 600; justify-content: center; line-height: 1.2; min-height: 48px; min-width: 48px; padding: 12px 18px; } .wp-block-navigation__responsive-container-open:hover, .wp-block-navigation__responsive-container-open:focus-visible, .wp-block-navigation__responsive-container-close:hover, .wp-block-navigation__responsive-container-close:focus-visible { background: var(--action-color-background-hover); } .wp-block-navigation__responsive-container-open::after { content: "Menu"; } .wp-block-navigation__responsive-container-close::after { content: "Close"; } /* Room for the taller close control in the overlay header */ .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: calc(2rem + 48px); } /* Trigger button on the right side of the band. */ .site-header__nav.wp-block-navigation { align-items: center; display: flex; justify-content: flex-end; } .site-header__nav .wp-block-navigation__responsive-container-open { margin-block: 0.4rem; } } /* Stronger keyboard focus */ :focus-visible { outline: 2px solid var(--neutral-950); outline-offset: 2px; } /* Content links: keep underline on hover (backup for theme.json) */ .wp-site-blocks a:hover, .entry-content a:hover { text-decoration: underline; } /* * Header (nav on top): * row 1: Home About Calendar FAQ Contact ← full-width action band * row 2: [ avatar ] Craftsmen Lodge * tagline */ .site-header { background-color: var(--header-background); border-bottom: 4px solid var(--boaz-gold-700); } .site-header > .alignwide { width: 100%; } /* Reset block-layout sibling margins; control gap explicitly. */ .site-header > * { margin-block-end: 0 !important; margin-block-start: 0 !important; } .site-header > * + * { margin-block-start: 0.75rem !important; } .site-header__brand.site-header__brand { margin: 0; width: 100%; } .site-header__row.site-header__row { align-items: center; display: flex !important; flex-wrap: nowrap; gap: 18px; margin: 0; } .site-header__row .header-emblem--avatar { flex-shrink: 0; line-height: 0; margin: 0; } .site-header__row .header-emblem--avatar img { border-radius: 50%; display: block; height: 96px; margin: 0; object-fit: contain; width: 96px; } .site-header__identity.site-header__identity { display: flex !important; flex: 1 1 auto; flex-direction: column; gap: 0.15rem; margin: 0; min-width: 0; } .site-header__identity > * { margin-block-end: 0 !important; margin-block-start: 0 !important; } .site-header__identity .wp-block-site-title { font-size: clamp(1rem, 1.4vw + 0.55rem, 1.2rem); font-weight: 600; hyphens: auto; letter-spacing: 0; line-height: 1.2; max-width: 100%; overflow-wrap: anywhere; padding: 0; text-align: left; } .site-header__identity .wp-block-site-title a { color: inherit; cursor: default; pointer-events: none; text-decoration: none; } .site-header__identity .wp-block-site-tagline { color: var(--text-color-default); font-size: clamp(0.8125rem, 1vw + 0.45rem, 0.95rem); line-height: 1.35; margin: 0; max-width: 100%; overflow-wrap: anywhere; padding: 0; text-align: left; } /* * Nav: full-width action band flush with the top edge of the page. * Square corners. Internal nav content sits in the wide rail (matching alignwide brand). * * NOTE: WordPress duplicates the `site-header__nav` and `wp-block-navigation` * classes onto the inner