/**
 * COPYRIGHT 2024 BY ROBERT CURA. ALL RIGHTS RESERVED
 * AUTHOR: ROBERT CURA
 * INCEPTION: 2024MAR26
 * DESCRIPTION: Region GRID overrides
 **/

/*************************************************************************** *
 *
 * REGION GRID OVERRIDES                    
 *
 *************************************************************************** */
:root{
    --xrc-grid-area-16-large--x06-header-branding:
    "xl01 xl01 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl03 xl03"
    "xl01 xl01 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl03 xl03"
    "xl01 xl01 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl03 xl03"
    "xl01 xl01 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl03 xl03"
    "xl01 xl01 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl03 xl03"
    "xl01 xl01 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl02 xl03 xl03"
    "xm01 xm01 xm01 xm01 xm01 xm01 xm01 xm01 xm01 xm01 xm01 xm01 xm01 xm01 xm01 xm01";
}
/*-------------------------------------------------------------------------- */
/* 1. DEFINE THE GRID AREA 
/*-------------------------------------------------------------------------- */
.xrc-grid.xrc-region  {
/*.xrc-grid.xrc-x06--region-branding  {*/
    --xrc-swap-grid-template--display: grid;
}
.xrc-grid--container.xrc-region {
/*.xrc-grid--container.xrc-x06--region-branding {*/
    --xrc-swap-x06-grid--area           : var(--xrc-grid-area-16-small--header-branding);
    --xrc-swap-x06-grid--cols           : 3rem repeat(14, 1fr) 3rem;
    --xrc-swap-x06-grid--rows           : 4px 2rem auto auto 1px 1px 1px;
    --xrc-swap-x06-grid--gap-cols       : 1.0rem;
    --xrc-swap-x06-grid--gap-rows       : 0.0rem;
    --xrc-swap-x06-grid--align-items    : center;
    --xrc-swap-x06-grid--justify-items  : center;
}
    
.xrc-grid--container.xrc-x06--region-highlighted {
    --xrc-swap-x06-grid--area           : var(--xrc-grid-area-16-wide--title-01);
}
/*-------------------------------------------------------------------------- */
/*  When overriding a grid map (ie grid--area) you only need to change the
/*  variable --xrc-swa--x06-grid--area. No need to add the different variables.
/*  It has to be more specific than .xrc-grid--container.xrc-region.
/*  WATCH OUT FOR SPELLING ERRORS.
/*  SPECIFICITY OF THE FOLLOWING IS 040
/*-------------------------------------------------------------------------- */
.xrc-grid.xrc-grid--container.xrc-region.xrc-x06--region-branding {
    --xrc-swap-x06-grid--area           : var(--xrc-grid-area-16-large--x06-header-branding);
    /*--xrc-swap-grid-template--areas     : var(--xrc-swap-x06-grid--area);*/
    /*--xrc-grid-template--areas: var(--xrc-swap-grid-template--areas          , var(--xrc-dflt-grid-template--areas             ));*/
    /*grid-template-areas     : var(--xrc-grid-template--areas);*/
}
/*-------------------------------------------------------------------------- */
/*  2. SWAP THE GRID AREA VALUES IN                                                                          
/*-------------------------------------------------------------------------- */
/** SPECIFICITY IS 020 **/
.xrc-grid--container.xrc-region {
    --xrc-swap-grid-template--columns        : var(--xrc-swap-x06-grid--cols);
    --xrc-swap-grid-template--rows           : var(--xrc-swap-x06-grid--rows);
    --xrc-swap-grid-template--areas          : var(--xrc-swap-x06-grid--area);
    --xrc-swap-grid-template--column-gap     : var(--xrc-swap-x06-grid--gap-cols);
    --xrc-swap-grid-template--row-gap        : var(--xrc-swap-x06-grid--gap-rows);
    --xrc-swap-grid-template--align-items    : var(--xrc-swap-x06-grid--align-items);
    --xrc-swap-grid-template--justify-items  : var(--xrc-swap-x06-grid--justify-items);
    /*--xrc-swap-grid-template--align-content  :*/
    /*--xrc-swap-grid-template--justify-content:*/
    /*--xrc-swap-grid-template--auto-columns   :*/
    /*--xrc-swap-grid-template--auto-rows      :*/
}
/*-------------------------------------------------------------------------- */
/*  3. CUSTOMIZATION: ASSIGN THE PROPERTY VALUES                                                                          
/*-------------------------------------------------------------------------- */

/** COMMON PROPERTIES **/
.xrc-grid--item.xrc-x06-region-branding--box, 
.xrc-grid--item.xrc-x06-region-branding--box-banner,
.xrc-grid--item.xrc-x06-region-branding--box-menu
{
    --xrc-swap-grid-item--align-self    : start;
    --xrc-swap-grid-item--justify-self  : stretch;
}

.xrc-grid--item.xrc-x06-region-branding--box {
    --xrc-swap-grid-item--area          : xbox;
}
.xrc-grid--item.xrc-x06-region-branding--box-banner {
    --xrc-swap-grid-item--area: 1 / 1 / span 2 / span 16;
}
.xrc-grid--item.xrc-x06-region-branding--rect-01 {
    --xrc-swap-grid-item--area: xl02-start / 14 / xl02-end / 15;
    --xrc-swap-grid-item--align-self    : end;
    --xrc-swap-grid-item--justify-self  : end;
}
.xrc-grid--item.xrc-x06-region-branding--site-name {
    --xrc-swap-grid-item--area: xl02;
    --xrc-swap-grid-item--align-self    : end;
    --xrc-swap-grid-item--justify-self  : start;
}
    
.xrc-grid--item.xrc-x06-region-branding--box-menu {
    --xrc-swap-grid-item--area: xm01;
}


.xrc-grid--item.xrc-x06-region--rect-02 {
     /* RC: TO DO:
     1. ADD GRID-AREA 
     2. ASSIGN RECTANGLE TO GRID AREA
     3. ASSIGN REGION CONTENT TO GRID AREA
     */
     --xrc-swap-grid-item--area:            xl01-start / xl01-start / span xl01-end / xl01-end;
    --xrc-swap-grid-item--align-self    :   start;
    --xrc-swap-grid-item--justify-self  :   start;
}
.xrc-grid--item.xrc-x06--block-highlighted {
    --xrc-swap-grid-item--area:             xtx1-start / xtx1-start / xtx1-end / span xtx1-end;
    --xrc-swap-grid-item--align-self    :   start;
    --xrc-swap-grid-item--justify-self  :   stretch;
}


/*************************************************************************** *
 * RESPONSIVE LAYOUT FOR PARAGRAPH                                                                          
 *************************************************************************** */
/*-------------------------------------------------------------------------- */
/*  4. ADJUST THE GRID VALUES FOR RESPONSIVE LAYOUT                                                                          
/*-------------------------------------------------------------------------- */

/* XRC MOD: KNOWN AS SIZE: XSMALL: 500px */
@media(min-width:31.25rem) {
    :root {
        
    }
}

/* XRC MOD: KNOWN AS SIZE: SMALL: 700px */
@media(min-width:43.75rem) {
    :root {
        
    }
}

/* XRC MOD: KNOWN AS SIZE: MEDIUM: 1000px */
@media(min-width:62.5rem) {
    .xrc-grid--container.xrc-region {
    /*.xrc-grid--container.xrc-x06--region-branding {*/
        --xrc-swap-x06-grid--area           : var(--xrc-grid-area-16-large--header-branding);
        --xrc-swap-x06-grid--cols           : 3rem repeat(14, 1fr) 3rem;
        --xrc-swap-x06-grid--rows           : 5rem auto auto auto auto auto 2rem;
        --xrc-swap-x06-grid--gap-cols       : 1.0rem;
        --xrc-swap-x06-grid--gap-rows       : 0.0rem;
        --xrc-swap-x06-grid--align-items    : center;
        --xrc-swap-x06-grid--justify-items  : center;
    }
}

/* XRC MOD: KNOWN AS SIZE: LARGE: 1200px */
@media(min-width:75rem) {
    :root {
        
    }
}

/* XRC MOD: KNOWN AS SIZE: XLARGE: 1440px */
@media(min-width:90rem) {
    :root {
        
    }
}


/* end of file */