/*
Theme Name: Bankal
Description: Tema hijo de Storefront para Bankal Sudeste.
Author: Bankal Sudeste
Template: storefront
Version: 0.2.0
Text Domain: bankal
*/

/* 01. Fuentes locales: conservar los archivos de licencia de assets/fonts. */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('assets/fonts/bricolage-grotesque/bricolage-grotesque-latin-variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
}

@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/nohemi/Nohemi-Thin.woff2') format('woff2');
    font-style: normal;
    font-weight: 100;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/nohemi/Nohemi-ExtraLight.woff2') format('woff2');
    font-style: normal;
    font-weight: 200;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/nohemi/Nohemi-Light.woff2') format('woff2');
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/nohemi/Nohemi-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/nohemi/Nohemi-Medium.woff2') format('woff2');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/nohemi/Nohemi-SemiBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/nohemi/Nohemi-Bold.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/nohemi/Nohemi-ExtraBold.woff2') format('woff2');
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}
@font-face {
    font-family: 'Nohemi';
    src: url('assets/fonts/nohemi/Nohemi-Black.woff2') format('woff2');
    font-style: normal;
    font-weight: 900;
    font-display: swap;
}

/* 02. Variables de marca compartidas por todos los componentes. */
:root {
    --bankal-text: #1f1d1d;
    --bankal-background: #ffffff;
    --bankal-primary: #e6e5e5;
    --bankal-secondary: #e4e11e;
    --bankal-accent: #95132f;
    --bankal-font-heading: 'Bricolage Grotesque', Arial, sans-serif;
    --bankal-font-body: 'Nohemi', Arial, sans-serif;
}

/* 03. Tipografía y colores base, incluidos elementos heredados de Storefront. */
body {
    background-color: var(--bankal-background);
    color: var(--bankal-text);
    font-family: var(--bankal-font-body);
    font-weight: 400;
    line-height: 1.6;
}

button, input, select, textarea, .button, .added_to_cart {
    font-family: var(--bankal-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title, .site-branding .site-title a,
.widget-title, .widget .widget-title {
    color: var(--bankal-text);
    font-family: var(--bankal-font-heading);
    font-weight: 600;
    font-optical-sizing: auto;
}

body a { color: var(--bankal-accent); }
body a:hover { color: var(--bankal-text); }

body .site-header,
body .storefront-primary-navigation {
    background-color: var(--bankal-background);
    color: var(--bankal-text);
}

body .site-header a,
body .main-navigation ul li a,
body .site-footer,
body .site-footer a,
body .site-footer .widget-title {
    color: var(--bankal-text);
}

body .site-header a:hover,
body .main-navigation ul li a:hover,
body .site-footer a:hover {
    color: var(--bankal-accent);
}

body .site-footer,
body .main-navigation ul ul,
body .site-header .widget_shopping_cart,
body .storefront-handheld-footer-bar {
    background-color: var(--bankal-primary);
}

/* 04. Controles y formularios nativos. Las excepciones viven en store.css. */
body button, body input[type='button'], body input[type='reset'],
body input[type='submit'], body .button, body .added_to_cart {
    background-color: var(--bankal-primary);
    border-color: var(--bankal-primary);
    color: var(--bankal-text);
}

body button:hover, body input[type='button']:hover, body input[type='reset']:hover,
body input[type='submit']:hover, body .button:hover, body .added_to_cart:hover {
    background-color: var(--bankal-secondary);
    border-color: var(--bankal-secondary);
    color: var(--bankal-text);
}

body button.alt, body input[type='submit'].alt, body .button.alt,
body .added_to_cart.alt {
    background-color: var(--bankal-accent);
    border-color: var(--bankal-accent);
    color: var(--bankal-background);
}

body button.alt:hover, body input[type='submit'].alt:hover,
body .button.alt:hover, body .added_to_cart.alt:hover {
    background-color: var(--bankal-text);
    border-color: var(--bankal-text);
    color: var(--bankal-background);
}

body input.input-text, body input[type='text'], body input[type='email'],
body input[type='tel'], body input[type='url'], body input[type='password'],
body input[type='search'], body textarea, body select {
    background-color: var(--bankal-primary);
    color: var(--bankal-text);
}

body .price, body .woocommerce-loop-product__title { color: var(--bankal-text); }
body .onsale {
    background-color: var(--bankal-secondary);
    border-color: var(--bankal-secondary);
    color: var(--bankal-text);
}

/* 05. Foco de teclado y selección de texto. */
body :focus-visible {
    outline: 2px solid var(--bankal-accent);
    outline-offset: 3px;
}

::selection { background-color: var(--bankal-secondary); color: var(--bankal-text); }