/* Copyright (C) 2025 Rogan Johnston all rights reserved */

/* Layout Components */
.wide-container{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 1200px;
    padding-left: var(--base-spacing);
    padding-right: var(--base-spacing);
}

.narrow-container{
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 866px;
    padding-left: var(--base-spacing);
    padding-right: var(--base-spacing);
}

.inline-link{
    text-decoration:underline;
    text-align: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-style: inherit;
    font-size: inherit;
    color: inherit;
}

.icon{
    width: 100%;
    height: auto;
    vertical-align: middle;
    max-width: calc(6.25rem);
    max-height: calc(6.25rem);
    aspect-ratio: 1/1;
}
.icon-small{
    width: 100%;
    height: auto;
    vertical-align: middle;
    max-width: calc(3.125rem);
    max-height: calc(3.125rem);
    aspect-ratio: 1/1;
}

.portrait{
    width: clamp(50px, 80%, 200px);
    height: auto;
    aspect-ratio: 1/1;
}

.video{
    width: 100%;
    max-width: 1280px;
    min-width: 360px;
    height: auto;
    aspect-ratio: 16/9;
    border: 0;
}

/* Utility Classes */
.flex{ display: flex; justify-content: center; }
.flex-stretch{ display: flex; align-items: stretch; }
.flex-space-between{ display: flex; justify-content: space-between; }
.flex-space-around{ display: flex; justify-content: space-around; }
section, .flex-column{ display: flex; flex-direction: column;  justify-content: flex-start; }

.center-v{ align-self: center; }
.item-left{ margin-right: auto;}
.item-right{ margin-left: auto;}

.margin{ margin: var(--base-spacing); }
.margin-v{ margin-top: var(--base-spacing); margin-bottom: var(--base-spacing); }
.margin-h{ margin-left: var(--base-spacing); margin-right: var(--base-spacing); }

.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }

.border, .border-circle{ border: var(--line-thickness) solid var(--colour-content);  box-sizing: border-box;}
.border-circle{ border-radius: 50%; }
a:hover .border, a:hover .border-circle{ border: var(--line-thickness) solid var(--colour-accent); }

.debug{ border: 1px dashed green; }