/*
Theme Name:  Rootlike (Kadence Child)
Template:    kadence
Version:     1.0.0
Description: Child theme for rootlike.com. Applies the Rootlike Earth color palette and Playfair Display / Lora / Inter typography over the Kadence parent theme.
Author:      Daniel G. Epstein
Author URI:  https://rootlike.com
*/

/* ==========================================================================
   Rootlike Earth — CSS Custom Properties
   ========================================================================== */

:root {
    /* Color palette */
    --rl-color-primary:   #4A3728; /* Bark Brown  */
    --rl-color-secondary: #5C7A5C; /* Sage        */
    --rl-color-accent:    #C4893A; /* Amber Root  */
    --rl-color-surface:   #F5F1EA; /* Cream Soil  */
    --rl-color-text:      #242424; /* Charcoal    */

    /* Typography */
    --rl-font-heading: 'Playfair Display', Georgia, serif;
    --rl-font-body:    'Lora', Georgia, serif;
    --rl-font-ui:      'Inter', system-ui, -apple-system, sans-serif;
}

/* ==========================================================================
   Global Typography
   ========================================================================== */

body {
    font-family: var(--rl-font-body);
    color: var(--rl-color-text);
    background-color: var(--rl-color-surface);
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
    font-family: var(--rl-font-heading);
    color: var(--rl-color-primary);
}

/* Navigation, meta, captions, UI chrome */
.site-header,
.main-navigation,
.nav-links,
.entry-meta,
.wp-caption-text,
.comment-meta,
.widget-title {
    font-family: var(--rl-font-ui);
}

/* ==========================================================================
   Links
   ========================================================================== */

a {
    color: var(--rl-color-accent);
}

a:hover,
a:focus {
    color: var(--rl-color-primary);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.wp-block-button__link,
.button,
input[type="submit"] {
    background-color: var(--rl-color-primary);
    color: var(--rl-color-surface);
    font-family: var(--rl-font-ui);
    font-weight: 500;
}

.wp-block-button__link:hover,
.button:hover,
input[type="submit"]:hover {
    background-color: var(--rl-color-accent);
    color: var(--rl-color-surface);
}

/* ==========================================================================
   Block editor: highlight color in content
   ========================================================================== */

.has-rl-primary-color      { color: var(--rl-color-primary) !important; }
.has-rl-secondary-color    { color: var(--rl-color-secondary) !important; }
.has-rl-accent-color       { color: var(--rl-color-accent) !important; }
.has-rl-surface-color      { color: var(--rl-color-surface) !important; }
.has-rl-text-color         { color: var(--rl-color-text) !important; }

.has-rl-primary-background-color   { background-color: var(--rl-color-primary) !important; }
.has-rl-secondary-background-color { background-color: var(--rl-color-secondary) !important; }
.has-rl-accent-background-color    { background-color: var(--rl-color-accent) !important; }
.has-rl-surface-background-color   { background-color: var(--rl-color-surface) !important; }

/* ==========================================================================
   Site Header — Kadence (#78)
   Bark Brown background, cream-toned text and links, Inter for nav.
   ========================================================================== */

.site-header-upper-wrap,
.site-mobile-header-wrap {
    background-color: var(--rl-color-primary);
    color: var(--rl-color-surface);
    border-bottom: 1px solid rgba(245, 241, 234, 0.08);
}

.site-header-upper-wrap .site-title a,
.site-header-upper-wrap .site-title,
.site-mobile-header-wrap .site-title a,
.site-mobile-header-wrap .site-title {
    font-family: var(--rl-font-heading);
    color: var(--rl-color-surface);
    letter-spacing: 0.01em;
}

.site-header-upper-wrap .site-title a:hover,
.site-header-upper-wrap .site-title a:focus {
    color: var(--rl-color-accent);
}

.site-header-upper-wrap .site-description {
    color: rgba(245, 241, 234, 0.7);
    font-family: var(--rl-font-ui);
    font-size: 0.875rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.site-header-upper-wrap .header-navigation .menu > li > a,
.site-header-upper-wrap .main-navigation .menu > li > a {
    font-family: var(--rl-font-ui);
    font-weight: 500;
    color: var(--rl-color-surface);
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

.site-header-upper-wrap .header-navigation .menu > li > a:hover,
.site-header-upper-wrap .header-navigation .menu > li > a:focus,
.site-header-upper-wrap .main-navigation .menu > li > a:hover,
.site-header-upper-wrap .main-navigation .menu > li > a:focus,
.site-header-upper-wrap .header-navigation .menu > li.current-menu-item > a,
.site-header-upper-wrap .main-navigation .menu > li.current-menu-item > a {
    color: var(--rl-color-accent);
}

.site-header-upper-wrap .header-navigation .sub-menu {
    background-color: var(--rl-color-primary);
    border: 1px solid rgba(245, 241, 234, 0.12);
}

.site-header-upper-wrap .header-navigation .sub-menu a {
    color: var(--rl-color-surface);
    font-family: var(--rl-font-ui);
}

.site-header-upper-wrap .header-navigation .sub-menu a:hover {
    color: var(--rl-color-accent);
    background-color: rgba(245, 241, 234, 0.05);
}

.site-mobile-header-wrap .drawer-toggle,
.site-mobile-header-wrap .menu-toggle-open {
    color: var(--rl-color-surface);
}

/* Drawer (mobile menu) interior */
.mobile-toggle-open-container .drawer-content-wrap,
.popup-drawer .drawer-inner,
.popup-drawer-layout-fullwidth .drawer-content-wrap {
    background-color: var(--rl-color-primary);
    color: var(--rl-color-surface);
}

.mobile-navigation .menu > li > a,
.popup-drawer .menu > li > a {
    font-family: var(--rl-font-ui);
    color: var(--rl-color-surface);
}

.mobile-navigation .menu > li > a:hover,
.popup-drawer .menu > li > a:hover {
    color: var(--rl-color-accent);
}

/* Custom-logo image sizing */
.site-header-upper-wrap .custom-logo-link img,
.site-mobile-header-wrap .custom-logo-link img {
    max-height: 56px;
    width: auto;
}

/* ==========================================================================
   Site Footer — Kadence (#78)
   Dark bark background, multi-row layout, Inter for chrome.
   ========================================================================== */

.site-footer,
.site-footer-wrap {
    background-color: #3a2a1e; /* Dark Bark — also exposed as Kadence palette4 */
    color: var(--rl-color-surface);
    font-family: var(--rl-font-ui);
}

.site-footer a {
    color: var(--rl-color-accent);
}

.site-footer a:hover,
.site-footer a:focus {
    color: var(--rl-color-surface);
}

.site-footer .widget-title,
.site-footer .footer-widget-area-inner .widget-title {
    font-family: var(--rl-font-heading);
    color: var(--rl-color-surface);
    font-size: 1.125rem;
    letter-spacing: 0.02em;
}

/* Bottom-row (copyright row) divider + density */
.site-bottom-footer-wrap {
    border-top: 1px solid rgba(245, 241, 234, 0.1);
    font-size: 0.875rem;
    color: rgba(245, 241, 234, 0.75);
    padding-block: 1rem;
}

/* Multi-row footer widget rhythm */
.site-middle-footer-wrap .site-footer-row-container-inner,
.site-top-footer-wrap .site-footer-row-container-inner {
    padding-block: 2rem;
}

/* Footer social-row pattern hook */
.wp-block-social-links.is-style-rl-footer .wp-block-social-link {
    color: var(--rl-color-surface);
    background: transparent;
}

.wp-block-social-links.is-style-rl-footer .wp-block-social-link:hover {
    color: var(--rl-color-accent);
}

/* ==========================================================================
   Buttons — refine focus state (#78)
   ========================================================================== */

.wp-block-button__link:focus-visible,
.button:focus-visible,
input[type="submit"]:focus-visible {
    outline: 2px solid var(--rl-color-accent);
    outline-offset: 2px;
}

/* ==========================================================================
   Block alignment — keep wide/full clean when used inside content (#78)
   ========================================================================== */

.entry-content > .alignfull,
.entry-content > .alignwide {
    margin-inline: auto;
}