/*
Theme Name: Twenty Twenty-Five OVERLAPS
Theme URI: https://overlaps.co.uk
Description: Customised OVERLAPS theme based on Twenty Twenty-Five
Author: Matt Stacey
Template: twentytwentyfive
Version: 1.0
*/

/* Your custom CSS goes here */
h1, h2, h3, h4 {
    scroll-margin-top: 80px;
}

h2 {
    border-bottom: 2px solid #eee;
    padding-bottom: 0.3rem;
}

.page h2
{
    margin-top: 5rem;
}
.page h3
{
    margin-top: 4rem;
}
.page h4
{
    margin-top: 3rem;
}
.page h5
{
    margin-top: 2rem;
}
.page h6
{
    margin-top: 1rem;
}

header .wp-block-navigation {
    margin-left: 0px;
    font-weight: 600;
}

header .wp-block-site-title a {
    text-decoration: none;
}

.text-primary { color: var(--wp--preset--color--primary); }
.text-success { color: var(--wp--preset--color--success); }
.text-warning { color: var(--wp--preset--color--warning); }
.text-danger  { color: var(--wp--preset--color--danger); }

.wp-block-group:first-child
{
    padding-top: 0 !important;
}

.wp-block-code,
pre {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-left: 4px solid var(--wp--preset--color--secondary);
    padding: 1rem;
    border-radius: 4px;
    font-size: 0.9rem;
    overflow-x: auto;
}

.docs-layout {
    max-width: 1200px;
    margin: auto;
	margin-top: 30px;
}

.docs-sidebar {
    font-size: 0.9rem;
	border-right: 1px solid #eee;
    padding-right: 20px;
}

.docs-sidebar a {
    display: block;
    padding: 4px 0;
    color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.docs-sidebar a:hover {
    text-decoration: underline;
}


.callout {
    padding: 1rem;
    border-left: 4px solid;
    margin: 1rem 0;
}

.callout-info {
    background: #f3f0ff;
    border-color: var(--wp--preset--color--info);
}

.callout-warning {
    background: #fff8d9;
    border-color: var(--wp--preset--color--warning);
}

body {
    font-size: 17px;
}

p {
    max-width: 70ch;
}

/*Index List Page Numbering*/
.listclass {
    list-style: none;
    counter-reset: item;
}

.listclass li {
    counter-increment: item;
}

.listclass li::before {
    content: counters(item, ".") ". ";
    font-size: 1rem;
    padding-right: .75rem;
}

.listclass li ul {
    list-style: none;
    counter-reset: item;
}

/*Index List Date Formatting*/
.listclass li {
    font-size: .6rem;
    color: var(--wp--preset--color--secondary);
}

.listclass li a {
    font-size: 1rem;
    color: var(--wp--preset--color--info);
}

/*Separate menu items with a subtle border*/
ul.wp-block-navigation li.wp-block-navigation-item
{
    border-bottom: 1px solid #eee;
}

/*Not the first item though (the top menu item)*/
ul.wp-block-navigation > ul.wp-block-page-list > li.wp-block-navigation-item
{
    border-bottom: 0;
}

/*Top level menu button more padding */
ul.wp-block-navigation > ul.wp-block-page-list > li.wp-block-navigation-item > a.wp-block-navigation-item__content
{
    padding: 4px 16px;
}

/*Hover effect*/
ul.wp-block-navigation li.wp-block-navigation-item
{
    transition: background-color .265s ease-in-out, color .265 ease-in-out;
}

ul.wp-block-navigation li.wp-block-navigation-item:hover
{
    background-color: var(--wp--preset--color--primary);
}

ul.wp-block-navigation li.wp-block-navigation-item:hover a.wp-block-navigation-item__content
{
    text-decoration: none;
}


/*On large screens allow the menu items to be full-width*/
@media screen and (min-width: 768px)
{
    ul.wp-block-navigation a.wp-block-navigation-item__content
    {
        white-space: nowrap;
    }
}

/*Make sure a little bit of indent happens even on small screens */
@media (max-width: 781px)
{
    .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container
    {
        left: 10%;
    }
}
